DEV Community: SachinDas246

Why the Web cannot beat Screen.Studio!

SachinDas246 — Sat, 08 Nov 2025 12:45:37 +0000

You’ve probably seen them, those incredibly polished screen recordings that seem to effortlessly guide your attention. With smooth, automatic zooms that follow the action and elegant cursor effects, these videos make tutorials and product demos more engaging than ever. Recently, a new wave of software has emerged that automates the hard parts of video creation, letting you simultaneously record your screen, camera, and microphone to produce stunning results with minimal effort.

This is the magic that inspired us to create ScreenScript.app. We wanted to bring the power of tools like Screen Studio, which is designed for macOS, to the web, making professional-quality screen recording accessible to everyone directly from their browser. Within weeks, we had a working MVP, and after a month of deep-diving into the technical nuances of web-based video, we launched a stable, powerful product.

But this isn’t just a story about our product. It’s a look behind the curtain at the unique and often frustrating challenges that come with building sophisticated screen recorders using web technology instead of native software. If you’re a developer or just curious about the limits of what a browser can do, these are the hurdles we face every day.

The Alluring Promise of the Web

Web technology is evolving at a breakneck pace. With powerful tools like the Screen Capture API and the File System Access API, it often feels like a web developer can do almost anything a native developer can. This promise of a single codebase that runs everywhere, accessible with just a URL is what drove us to build ScreenScript on the web. The potential to create a seamless, installation-free experience was too compelling to ignore.

However, as we moved from idea to implementation, we discovered that while you can do almost anything, there are subtle but significant limitations that browsers impose, often for very good security reasons. And for a screen recorder, many of these limitations revolve around one critical element: the cursor.

The Cursor: The Star of the Show and Our Biggest Headache

For a tool like ScreenScript, the cursor is everything. It’s the focal point of the viewer’s attention. The ability to track the cursor’s movements is what powers our most valuable features: automatic, intelligent zoom that follows where you click and the ability to customize its appearance to make it stand out. This is where native tools truly shine and where web-based recorders hit a wall. Let’s break down why.

1. The “Baked-In” Cursor Problem

When you use the standard Screen Capture API in a browser like Chrome, you get a high-quality video stream of the screen. The problem is, the cursor is “baked” directly into that video. Think of it like trying to remove the eggs from an already-baked cake; it’s impossible.

This means that, unlike in native applications, we have no way to isolate the cursor to customize its appearance, change its size, or temporarily hide it to create smooth zoom animations. The only alternative would be to use complex AI to remove the cursor from every single frame, which is incredibly inefficient.

Now, if you dig into the technicals, you’ll find a setting in the Screen Capture API called “cursor,” which should theoretically allow us to control whether the cursor is captured. However, browser compatibility for this feature is inconsistent at best, making it an unreliable solution for a product that needs to work for everyone.

2. The Cursor’s Invisible Walls

This is the second, and perhaps bigger, challenge. In a browser, for critical security reasons, JavaScript can only track the position of your cursor within the confines of the webpage it’s running on. The moment you move your mouse to another browser tab, a different application window, or even your desktop, our web app loses all context. It has no idea where your cursor is.

This single limitation is the primary roadblock to implementing true, action-following zoom for the entire screen on the web. It’s also why many web-based screen recorders rely on browser extensions. An extension grants the application deeper access to the browser, allowing it to “see” the cursor’s position across any tab.

But even extensions have their limits. They still can’t track the cursor’s position once you leave the browser and interact with another application or your desktop. This is a fundamental boundary that native software doesn’t have, giving desktop apps a significant advantage in creating recordings that seamlessly follow your focus across your entire workflow.

The Road Ahead: Innovating Within the Browser’s Limits

If we could solve these two fundamental cursor challenges on the web, a new generation of screen recorders could be built that could potentially surpass the capabilities of even the best native apps. Until then, we are limited to minimal cursor customization and zoom automation that works best within a single browser tab.

At ScreenScript.app, we are committed to pushing the boundaries of what’s possible in the browser. We are constantly exploring new web technologies and creative workarounds to overcome these hurdles. Our goal is to deliver the most powerful, intuitive, and accessible screen recording experience on the web. The challenges are significant, but so is the potential of the open web.

How to Create Product Demos ? (Even Without a Video Team)

SachinDas246 — Wed, 29 Oct 2025 18:37:52 +0000

After months of building your product, you’re finally ready to show it to the world. But there’s one big question: how do you present it to your users?

Yes, you guessed it. Video is the best way to engage your audience.

Studies show that the average viewer watches only a few seconds of a product demo before skipping. So, the challenge is clear: how do you create a product demo video that actually holds attention?

Let’s walk through how you can create product demo videos that look professional and convert viewers into customers.

Why Product Demo Videos Matter

A good demo helps your users understand exactly what your product does without reading long descriptions or guides. Whether you’re launching a SaaS, mobile app, or any digital product, showing it in action is the best way to build trust and clarity.

But you don't need an expensive setup or professional video editor like Adobe After Effects or DaVinci Resolve. There are many simple tools, even websites, that can help you create such demos at a fraction of the cost without any learning curve. For this we will be using Screen Script, but feel free to experiment with others.

ScreenScript.app helps us to create product demos quickly without needing any additional tools; just visit ScreenScript.app. Also it has some great tools to improve presentation like background, effects, etc.

Follow the steps to create a great demo:

Visit ScreenScript.app and sign up.
Go to the Launcher and create a new project.
Click Record to open the built-in online video recorder.
Make sure you have already opened your product.
Choose what to record: your entire screen, an app window, or a browser tab.
Once ready, click Start Recording and walk through your product’s main features.

That’s it; you’ve captured your demo. Now let’s make it shine.

Here is a simple structure to follow if you're starting out

Want your video to convert? Structure it right.

1. Start with the Problem.
Open with a simple, relatable line:

“I built this tool to help you automate your Instagram posts.”“This app helps you launch a website in 5 minutes.”

Make it short, relatable, and clear about the intent behind your product.

2. Share a Quick Backstory
In one sentence, explain why you built it; people love a personal reason or inspiration.

3. Showcase the Core Functionality
Don’t show everything. Focus on your product’s most important and differentiating features. Keep it crisp so users stay engaged.

4. Explain the Benefit
End with how your tool helps: save time, make money, or simplify work. That’s what viewers care about most.

👉 Ideal length: 1–2 minutes (never more than 3).

Editing and Enhancing Your Demo Video

Once you stop recording, you’ll be redirected to ScreenScript’s editor. Here’s what to do next:

Trim the video: Select start and end points to remove unnecessary parts.
Adjust aspect ratio & viewport quality: Make your video look clean and sharp.
Add background layers: A subtle wallpaper enhances visual appeal.
Use zoom effects: Smooth zooms highlight key moments and make your demo feel professional.

Once you are done with editing, click on the export button. Then choose your preferred resolution and export your final demo.

All this happens directly in your browser: no downloads or external tools required. It’s a true online video recorder and editor for product demos.

Wrapping Up

Wrapping Up
That’s it! You’ve just created a stunning product demo video maker, all without any technical skills. Most of the time, look for products that clearly focus on specific niches like these, as they reduce the learning curve and mostly will be cheaper.

For most of the use cases, I’d recommend using ScreenScript, but feel free to check out others too.

Product I used 👉: https://screenscript.app

Yet Another Product Hunt Alternative?

SachinDas246 — Fri, 11 Apr 2025 05:01:49 +0000

Not Just Another Clone: What is Foundout.io?

I'm currently preparing to launch a new product called Foundout.io - a product discovery platform designed for the modern age of software. As we gear up for a soft launch, one recurring question I keep hearing is: "So… it's just another Product Hunt clone, right?"

Well, not exactly. That question is actually the reason I'm writing this blog.

Yes, Foundout.io lets people discover new software products. But comparing it to Product Hunt just because it lists products is like calling Reddit a Twitter clone because both involve posting text. The core philosophy, approach, and value proposition are fundamentally different. Let's dive deeper.

A Quick Look at Product Hunt

Product Hunt is a well-known platform that helps makers launch their products to a global audience. The idea is simple: launch your product, get upvotes, and hope to hit the leaderboard for the day.

What Problem Does Product Hunt Solve?

It gives creators visibility. In a digital world, especially for indie hackers and startups, Product Hunt offers a platform to break through the noise - for a short while.

Who is Product Hunt's Ideal Customer Profile (ICP)?

Mostly tech enthusiasts, startup founders, indie makers, and early adopters. If your product targets these groups, Product Hunt can work wonders - but if not, things get tricky.

What's Happening Now? Current Trends

On platforms like Reddit, users are increasingly voicing their frustrations with Product Hunt:

Overcrowded: It's flooded with AI tools and MVPs spun up in hours
Lack of long-term discovery: It's great for launch day but poor for sustained visibility
Repetition: Many launches feel similar or uninspired

At the same time, we're seeing an explosion of new product directories. Some are thriving, proving there's a real demand for alternatives. And as AI platforms like Replit and Lovable.dev lower the barrier to entry, the number of products keeps rising - but not necessarily the quality.

Foundout.io: Built for Discovery, Not Just Launch

Foundout is designed to help users discover the best products - not just witness their launches. In today's landscape where AI tools enable anyone to create a product in hours, the real challenge isn't building - it's finding. Foundout tackles this head-on by building a system where communities - not algorithms - drive visibility.

Each user on Foundout can create or join topic-specific communities that act like mini Product Hunts. These communities are self-moderated and thrive based on engagement and relevance. If one community loses quality or direction, users can simply migrate to better ones. This natural curation system helps ensure only high-quality, well-managed spaces thrive.

We also shift the focus from launch-day hype to long-term relevance. Founders don't need to climb to the top of a leaderboard on one day to be discovered. Instead, they can become visible to users who are actually looking for their kind of product, within a relevant niche.

Think of Foundout as Reddit meets Product Hunt, but with a smart AI-assisted search layer that makes it easier to find gems hidden in the crowd. It's built to adapt to the future of product discovery - where quality, community, and relevance matter more than just a launch-day spike.

Conclusion

Foundout.io is not here to replace Product Hunt - we're building something different. It's not a launchpad. It's a discovery engine, powered by niche communities and real users.

In a world overwhelmed by software noise, we believe the future of product discovery lies in decentralized curation, community-led organization, and authentic engagement. If that resonates with you, we invite you to join us at Foundout.io.

Let's build a better way to find great products - together.

Django Build Automation

SachinDas246 — Wed, 29 Nov 2023 17:14:40 +0000

Hello! If you are a person like try to automate django build for production, here is a small script for you. Building Django for production is not a tedious task compared to other frameworks but, there are many elements that can go wrong because we need to configure each of them manually , which can be removed by automating the process. Though some other approaches like using environment variables , docker secrets , or even splitting settings.py into production.py and development.py exist , i felt this approach suits my current project and hope some other person would find this helpful.

This is my current Folder structure

project_name
├── docs
├── .git
├── .gitignore
└── source
    ├── django
        ├── conf
        │   ├── asgi.py
        │   ├── __init__.py
        │   ├── settings.py
        │   ├── urls.py
        │   └── wsgi.py
        ├── manage.py
        └── requirements.txt

1 . Create a file named build.py inside project_name (along with source dir, .git and docs ) and add the following content

import shutil
import os


class Builder:
    def __init__(self,source_dir,build_dir):

        self.source_dir = os.path.abspath(source_dir) if not os.path.isabs(source_dir) else source_dir
        self.build_dir = os.path.abspath(build_dir) if not os.path.isabs(build_dir) else build_dir
        self.ignore_file = os.path.join(os.path.dirname(os.path.abspath(__file__)),'.buildignore')
        self.prebuild_dir = os.path.join(os.path.dirname(os.path.abspath(__file__)),'pre_build')
        print(self.source_dir)
        print(self.build_dir)

    def get_ignore_patterns(self):
        self.ignore_patterns = []
        if os.path.exists(self.ignore_file):
            with open(self.ignore_file, 'r') as buildignore_file:
                self.ignore_patterns = buildignore_file.read().splitlines()      

        print(self.ignore_patterns) 

    def copy_to_build_dir(self):
        shutil.copytree(self.source_dir,self.build_dir,ignore=shutil.ignore_patterns(*self.ignore_patterns))    

    def replace_prebuild(self):
        shutil.copytree(self.prebuild_dir, self.build_dir, dirs_exist_ok=True)

    def build(self):
        self.get_ignore_patterns()
        self.copy_to_build_dir()
        self.replace_prebuild()


builder =Builder('./source','./build') # change the name of dir if needed
builder.build()

You can change the name of the folders as you need in this file.

2 . Create a file name .buildignore. This will act similar to .gitignore , ie you can can mention here the files and dirs you dont need in production. For now you can add the following content and edit as you need.

*.log
*.pot
*.pyc
__pycache__/
.env
db.sqlite3

3 . Create a folder named pre_build and inside this create the files that you need to replace in production. Note you need to follow the same folder structure for the file you need to replace. For instance if you need to replace setting.py for production you should create settings.py in the following path: project_name/pre_build/django/conf/settings.py . Also you can add additional files that will be copied to the respective path in the build dir. In short, the script will copy all the contents from pre_build and replace any content that already exist from the source. You can utilise this to include other files like docker-compose,.env files or even nginx configs etc . Also you can configure your static files (change STATIC_ROOT to a dir inside pre_build).

Now my dir would look like

project_name
├── docs
├── .git
├── .gitignore
├── .buildignore
├── build.py
├── pre_build
│   └── django
│       └── conf
│           └── settings.py
└── source
    └── django
        ├── conf
        │   ├── asgi.py
        │   ├── __init__.py
        │   ├── settings.py
        │   ├── urls.py
        │   └── wsgi.py
        ├── manage.py
        └── requirements.txt

4 . and when you want to build the production run the following

python build.py

Django COPY PASTE !

SachinDas246 — Fri, 24 Jun 2022 08:04:13 +0000

If you are Beginner or an intermediate Django developer u know that starting a new project in Django project is easy, nothing more than just couple of commands right? But at least for me I have to Duck it or check the previous project every time to get it right. For instance I always get trouble if it is createapp or createproject or startproject to start a Django project.

So here are some of the commands and snippets which you might find help full!. Note that these are not the steps to create a project nor are in particular order. Also you might not need all these steps in your project , so use only what you need.

1. Installing Virtual Env wrapper:

# For Linux and OS X :
pip install virtualenvwrapper

# For windows:
pip install virtualenvwrapper-win

2. Creating, Enabling and Disabling Virtual Environment using wrapper :

# To create virtual env
mkvirtualenv [virtual env name]
# To enable virtual env
workon [virtual env name]
# To disable virtual env
deactivate

3. Installing Django

pip install Django

4. Creating a Django Project:

Some may prefer giving project name as "config" at first so they get a project with settings.py and other core files inside "config app and afterwards renaming the project root directory to the project name.

django-admin startproject [project name]

5. Running in development server

# running on 127.0.0.1:8000
python manage.py runserver
# running on a different port (eg. 127.0.0.1:7777)
python manage.py runserver 7777
# running on a different ip (eg. 192.168.1.5:7777)
python manage.py runserver 192.168.1.5:7777

6. Access Database shell

python manage.py dbshell

7. Access Django shell

python manage.py shell

8. Make Database Migration and Migrate

# Make migration
python manage.py makemigrations
# Migrate
python manage.py migrate

9. Adding new App to the project:

Run the following command to create an app
Add your app name to the INSTALLED_APPS variable in settings.py

# create new app
python manage.py startapp app_name
# add app to settings.py
INSTALLED_APPS = [
    'django...',
     .
     .
    'app_name'
]

10. A simple view that return a web page

define a function inside your app_name/view.py

from django.shortcuts import render

def home(request):    
    return render(request,'home.html') # make sure you have home.html configured properly

11. Configure urls for each app

You can have separate urls.py file in each app to efficiently route your project.For which: create a file named urls.py inside your corresponding app and add it to the main urls.py (that resides along with your settings.py file )

inside newly created urls.py

from os import name
from django.urls import path
from . import views
urlpatterns = [
    path('__page_location__', views.function_name,name="name for the page"),
# here it would be path('home', views.home,name="home"),"
]

Add this url.py to the main urls.py (that resides along with settings.py)
main "urls.py"

from django.contrib import admin
from django.urls import path
from django.urls.conf import include

urlpatterns = [
  #  path('admin/', admin.site.urls),
  path('app_name', include('app_name.urls')),
]
# if you done properly you should see home page at http://127.0.0.1:8000/app_name/home

12. Adding Templates

Create a Dir called templates(or anything you wish) inside project root Dir
Update your TEMPLATES variable inside settings.py

# add your templates dir to DIRS in TEMPLATES variable.
'DIRS': [os.path.join(BASE_DIR,'templates')],

13. Configuring Static Dir

Create a dir called "static" (or anything you wish) in the project root dir .
Update setting.py by adding static dir to it.

# If you need a different name or location update it accordingly. you could add multiple dirs using ',' commas 
STATICFILES_DIRS = [
    BASE_DIR / "static",
]

14. Loading static files inside html

whenever you need to static files in your template , you need to call {% load static %} before hand ( note you need to call in every html(template) file that require static content.)

{% load static %}

After that , you could load static file like ( here logo.png is the file located in the static dir. )

<img src="{% static 'logo.png' %}" alt="logo">

15. Similarly you could load your css file.

create style/style.css inside static dir
add this to your corresponding html template

{% load static %}
<link rel="stylesheet" href="{% static 'style/style.css' %}">

16. Configuring Media files

As you might know Django don't like to serving its media file , so this config also allows only media file access in development
Create a dir called media in the project root dir
Add config to settings.py and urls.py (that resides along with your settings.py file )

# in settings.py add the following
MEDIA_ROOT =os.path.join(BASE_DIR,'media/')
MEDIA_URL = '/media/'

# in urls.py 
from django.conf import settings
from django.conf.urls.static import static
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

17. A Simple Template Approach

A simple approach for the Django app is to create a base html template that includes the basic tags and extend it to the other pages.
- here is a sample basic template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PROJECT_NAME</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'style/style.css' %}">
</head>
<body>
    {% block content %}

    {% endblock %}    
</body>
</html>

And extent in another template for example home.html

{% extends 'base.html' %}
{% block content %}

<h1> this is home page </h1>

{% endblock %}

18. Including templates

If wish, you could include other templates to your main template. For instance you could create a template named nav_bar.html and include in every other templates ( here I have included it in home.html ).

nav_bar.html

<p> this is a nav bar. </p>

home.html

{% extends 'base.html' %}
{% block content %}
{% include 'navbar.html'%}

<h1> this is home page </h1>

{% endblock %}

19. Simple regex verification

Warning: these are very basic regex. Do your own research before using regex.

import re

email_regex = re.compile(r'([A-Za-z0-9]+[.-_])*[A-Za-z0-9&]+@[A-Za-z0-9-]+(\.[A-Z|a-z]{2,})+')
zip_regex = re.compile(r'^[A-Za-z0-9\.\-\s]{3,10}$')
password_regex = re.compile(r'^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$ %^&*-])[a-zA-Z0-9!@#$&*]{8,15}$')

# To verify
email = "someone@somewhere.com"
if not re.fullmatch(email_regex,email):
        return "Invalid email"

20. CSRF for Api

By default Django checks for csrf verification, so make sure you add {% csrf_token %} in your forms
And if you are manually send request using js you need to include the csrf token in your request.

# for forms:
<form ... >
{% csrf_token %}             
</form>

# For manual request 

# this function return csrf token from cookie 
function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }


# inside your request options add csrf token in header
var requestOptions = {
            method: 'POST',
            headers: {'X-CSRFToken': getCookie('csrftoken')},
            body: formdata,
            mode: 'same-origin',
            redirect: 'follow'
};

First Vlog on Logic Code

SachinDas246 — Sun, 02 Jan 2022 14:32:04 +0000

It's my first video explaining the working with logic code. I feel like its too long for some but if you only want to see usage of the program skip to the last part.
If you don't know what logic code is Read my previous post:

Creating a new language for logic circuits

SachinDas246 ・ Nov 11 '21

#javascript #node #verilog #opensource

Creating a new language for logic circuits

SachinDas246 — Thu, 11 Nov 2021 13:45:39 +0000

Building electronic circuits can be difficult especially the bigger ones,as there is no printf to check if wire is properly connected. Being an electrical engineering ,I have tried to build tools that would help understand and design electronics faster and better. Chip.io
is one such android app that would give a virtual experience of using a 8085 trainer kit.

But in this project I want something more complex😈,
something like a code that would define a logic circuit. I know what you are going say now, there is verilog for that ? Ya ,there is .. but in my opinion it could be made more simpler and easy to use. More over my main focus is not to create a language to program a FPGA, instead to a language to define a logic circuit for simulation, so I believe there could some compromises which I could utilise to make it more understandable.

However, I don't discourage the possibility of using it to program integrated circuits🤔.

How is it implemented?

It's basically a nodejs project which utilizes nearley and Moo to parse the code which is then converted to a particular javascript format that simulates logic circuit.

Where it started?

All of this began while I was trying to design a circuit in logisim and was not able to do in the way I wanted it to be. Also at that time i had already started messing out with lexer and parsers, which finally led to this project.

Milestones 🗿 and targets

Build an interpreter that can run the code
Multiple libraries that implements complex circuits.
A graphic interface which can generate the code by drag n drop ( Similar to logisim )
Ability to program integrated circuits ( sometimes 😜)

Sample program

Let me show you a sample of the program

module HalfAdder([a,b]=>[s,c])
{
    init{
        [s] = [0];
        [c] = [0];
    }
    process {
        [s] = XOR([a,b]);
        [c] = AND([a,b]);
    }
}
HalfAdder Adder;

Input [A] = [0];
Input [B] = [0];
Output [S];
Output [C];

wire(A => Adder.a);
wire(B => Adder.b);
wire(Adder.s => S);
wire(Adder.c => C);

And this would produce a circuit like

Explanation

I don't want to go deep into the explanation but in simple terms we created a blue print for HalfAdder ,whose inputs are a and b, outputs are s and c. After which we instantiated a HalfAdder ( as Adder) which is connected to input ports A and B , Output Ports S and C

Any suggestions and feedbacks is greatly appreciated.
Thank you ❤️ for reading.

Can anybody recommend a good Electronics project?

SachinDas246 — Sun, 11 Apr 2021 07:16:34 +0000

I don't know if this kind of questions can be asked here.I want a good Electronics or electrical project.I have searched a lot most of them are mostly some Arduino and sensors , I want something better than that.It would be great help if you could recommend me some.