Forem: Pratham Dupare

How I got a Software Developer Job without CS degree or Bootcamp!

Pratham Dupare — Mon, 27 Jan 2025 05:15:02 +0000

How I Went from a Non-CS Background to Landing a Job as a Software Engineer

Starting Out: The Dream of Becoming a Scientist

It all started in my third year at IISER Bhopal, one of India’s premier institutions for scientific education and research. Since childhood, I had always wanted to become a scientist, and IISER seemed like the perfect place to make that happen. However, things took an unexpected turn when, due to my not-so-great grades, I was assigned Mathematics as my major instead of Physics, which I was genuinely passionate about.

At this point, software development was not even on my radar — I didn’t even know what coding was. A year later, my lack of interest in Mathematics made things worse. I failed several courses, couldn’t pass the re-exams, and ultimately had to take a year off. It was a rough time, and I felt really lost.

Discovering a New Interest

During that year off, I started getting interested in Linux. I tinkered with it, customized it, and started learning basic bash scripting. This was my first taste of programming, and it piqued my curiosity. When I got back to college, I realized I couldn’t keep going down the same path. Since I enjoyed working with Linux, I thought, “Why not try programming?”

The next question was: what type of programming?

Researching My Options

I researched the field and found that getting into software development without a degree was rare but possible. One of the videos I watched introduced me to an open-source guide called The Odin Project. This community-maintained project follows a “learn by doing” approach, which was perfect for me.

Now, I had a direction. I was fortunate to still be in college, with only one or two courses per semester and fixed meal timings, giving me the time I needed to focus on programming. I set a routine: I’d wake up, work out, have breakfast, and head to the library by 8 a.m. I’d spend my entire day there coding and learning, trying to complete The Odin Project.

Of course, it wasn’t all smooth sailing. There were exams, days of low motivation, and setbacks. But I loved every bit of the journey. I enjoyed solving problems and felt I could pursue this long-term.

Building Skills and Projects

It took me about a year and a half to complete The Odin Project. Along the way, I gained knowledge in full-stack development — HTML, CSS, JavaScript, React, Node.js — and other skills like using the command line, deployment, and Vim, my beloved code editor.

After that, it was time to showcase my skills by building projects and applying for jobs. I didn’t stop learning. While many others were stuck on React, I learned Next.js and created projects, even building websites for some of my college professors.

Applying for Jobs and Freelancing

I started working on my LinkedIn profile and applied everywhere: LinkedIn, Wellfound (formerly AngelList Talent), Internshala. Most applications went unanswered, and some that did had tasks I couldn’t complete. So, I began posting on LinkedIn, sharing things I was working on or found interesting.

I knew I needed experience and a solid resume to stand out, so I started freelancing. I landed a few gigs on Upwork and won two online hackathons — one solo and one with developer friends I met on Discord. I also maintained a blog and wrote on Medium.

Focusing on Data Structures and Algorithms (DSA)

Eventually, I started getting interviews but struggled with data structures and algorithms (DSA), which I hadn’t focused on much. After some failed interviews, I spent a month working on DSA.

Then, out of nowhere, an HR intern from a startup in Bhopal messaged me. I sent over my resume, and after about 10–15 days, they called me in for an interview. Fortunately, I got in! I was offered a Software Developer Intern position, which would convert into a full-time role once I finished college. The role allows me to work remotely until then.

The Journey Ahead

Maybe I got lucky, but as they say, “The harder you work, the luckier you get.” I know there’s still a lot to learn and areas where I need to grow. I’m committed to continuous learning, freelancing, building hobby projects, and picking up new languages.

I recently joined the Medium Partner Program, so if you enjoyed my story, consider giving it a clap!

Connect with Me

GitHub
Instagram

Thank you for reading my story!

My dev workflow - Linux, Hyprland ,Neovim and Tmux.

Pratham Dupare — Mon, 27 Jan 2025 05:04:04 +0000

Disclaimer: This is not a guide on how I rice my Window manager, what terminal I use, it's purely how I use my tools.

Introduction

The time has come for me to share my developer workflow and how I use my tools to become a PRO developer!

What I Don't Focus On

GPU-rendered terminals (e.g., Alacritty).
Ricing my desktop or color schemes.

What Matters

Speed
Lower mental overhead

The Tools I Use for the Perfect Developer Workflow

Linux (of course!)
Window Manager: Hyprland (with animations disabled)
Terminal: foot (since I use Wayland)
Terminal Multiplexer: Tmux

Note: If you’re using Mac, great! Try to replicate this setup and find tools that make you fast and productive. If you use Windows, consider upgrading your RAM and playing some games; that's all I can suggest.

Window Management

Most common Linux distros come with GNOME or KDE Plasma, which are excellent and a big reason for Linux’s recent improvements. However, I prefer not to use them because I don't want to rely on the mouse to manage windows. I prefer a window manager to streamline my workflow.

Tiling Window Manager

A tiling window manager automatically tiles and splits your windows, allowing you to quickly view and manage your open applications. I have set my ALT key as the main modifier, and use the following shortcuts:

Alt + 1 to switch to my browser on the 1st workspace.
Alt + 2 to switch to my terminal on the 2nd workspace.
And so on, with workspaces typically maximized.

This setup allows me to quickly switch between tasks without worrying about window positions.

I can cycle through windows using Alt + HJKL, similar to Vim. Focused windows have highlighted borders, making navigation straightforward.

Terminal Workflow

In my terminal, I use tmux, a terminal multiplexer that lets you split your terminal into multiple panes. This setup eliminates the need to switch between workspaces just to work on another terminal. It also helps me avoid multiple displays, which can be distracting and bad for posture.

Using Tmux

Tmux has a prefix key (Ctrl + a in my case) that triggers tmux commands. For example, after pressing the prefix key, you can switch between panes using numbers or navigate to the next pane with prefix + n. Tmux also keeps sessions alive, so if you accidentally close the terminal window, you can resume your work by running tmux a.

Programming

For programming, I use Neovim instead of VS Code.

Why Neovim?

VS Code is bloated and slow.
Neovim runs in the terminal.
I prefer Vim motions for efficient text editing.
I don’t use the mouse (more on this later).

Inside a Codebase

When starting work, I navigate to the desired directory and run nvim ., which opens Neovim in that directory (similar to VS Code’s code .).

Opening a File

Moving Between Files

To manage multiple open files, I use the Harpoon plugin, developed by The Primeagen. Harpoon lets me mark frequently used files and switch between them easily without cluttering my workspace. It also saves cursor positions, enhancing productivity.

Conclusion

This setup enables an exceptionally fast workflow and keeps development exciting. There is always room for improvement, and I’ve tailored my workflow to work best for me through experimentation and learning. The key is to try new things, step out of your comfort zone, and develop unique skills that make you a great developer.

One Screen for Productivity

Pratham Dupare — Mon, 27 Jan 2025 04:56:06 +0000

You might have seen many people in productivity videos using multiple or wide-angle screens, and it might feel straightforward to believe that using multiple displays might improve productivity. However, it’s actually the opposite. How so?

The best analogy I can think of is typing on a keyboard. The main reason people use touch typing to type fast is that it doesn’t make you look down at the keyboard while you're focused on the task. It makes you much faster than looking down. Looking at a secondary or multiple screens is similar. But what’s the proof of it, you might ask.

The Benefits

You may have seen people wearing hoodies or hats while they focus on something. This is beneficial because of how our brain works: when focused on one “not-big” area, it becomes alert and reduces distractions. I’m not saying you’ll definitely have distractions on other screens, but using a single screen can reduce eye and brain fatigue by minimizing the need to switch and process information across different places.

In a podcast by Andrew Huberman called "Optimizing Workspace for Productivity, Focus, & Creativity," he discusses the benefits of narrow vision. Huberman recommends practicing either narrowing or broadening your visual focus. Narrow screens, like those on laptops, help us stay focused by limiting our visual area and keeping distractions at bay. Looking at a smaller screen is like putting "invisible blinders" on, similar to a horse’s blinders, which keep it looking straight ahead.

This keeps our gaze steady and focused, allowing us to concentrate better. When using large monitors, our eyes tend to roam beyond this focus area, making it harder to stay attentive. Smaller screens keep our eyes in “focused mode,” which is ideal for paying attention to details. Simple tricks like cupping hands around the eyes or wearing a hat to block side vision also help keep us focused.

I don’t recommend using smaller screens like a phone or tablet for work, as the font size on these devices might defeat the purpose by straining your eyes with small fonts.

Ergonomics

Ergonomic research suggests that a single screen positioned directly in front of the user at eye level and within a 40–70 cm range promotes visual comfort and reduces neck strain. Dual screens, though useful for multitasking, often require side-to-side head movement, increasing neck and shoulder muscle load. Using a single screen helps maintain a stable head posture, minimizing muscle strain and enhancing ergonomic comfort.

Taking It One Step Further

Now that we’ve discussed the benefits, the question remains: how to optimize this for a faster workflow?

There are many ways to take this to the next level:

1. Using Keyboard Shortcuts to Move Between Windows or Workspaces

Just like with typing, you can use the same skill to move quickly between windows or workspaces by pressing shortcut keys. Whatever operating system you’re using, there’s always an option to set quick shortcuts to achieve this.

2. Using a Tiling Window Manager or Extension

A tiling window manager arranges open windows into non-overlapping tiles, keeping everything visible and organized on one screen. This setup, popular with Linux users, maximizes screen space and reduces the need to switch between windows. Non-Linux users can achieve similar results with tools like Microsoft PowerToys (Windows) or Rectangle (macOS), making workflows faster and more efficient.

3. Experiment

This varies from person to person, but the key is to create a workflow tailored to your own needs and habits. This makes it both interesting and challenging. It’s like creating your computer’s identity, one that’s unique to you.

Situations Where a Multi/Wide Setup Can Be Useful

As we discussed, using a single screen can be very helpful for productivity, ergonomics, and other aspects. However, there are still some situations where a multi-monitor setup can be useful:

As open-minded individuals, let’s consider these valid and important use cases:

Creative & Design Work: Designers and video editors can separate their workspace from tools and previews, improving workflow.
Gaming & Entertainment: Gamers and media consumers use wide screens for immersive gaming, and streamers can use a secondary monitor for reading chats, etc.

Conclusion

While using a single screen setup can improve focus, reduce distractions, and enhance ergonomic comfort, it’s not a one-size-fits-all solution. Different people may find that multiple screens work better for their workflow, especially if their tasks involve design, analysis, or other highly visual work. Productivity setups are highly personal, and optimizing them often requires a bit of experimentation.

Ultimately, it’s about finding what works best for you and adjusting your workspace to support your needs and goals. If you have other tips or experiences with different setups, I’d love to hear your suggestions in the comments. Thank you!

API Routes in Next.js - Part 4

Pratham Dupare — Tue, 02 Apr 2024 04:55:24 +0000

Introduction

Next.js is a full-stack framework that enables you to develop both the frontend and backend seamlessly. In contrast to using Express.js for building the backend, where you might need to run a separate server on a different port, Next.js eliminates this need.

Next.js employs a file-based routing system, making it convenient and efficient.

const express = require("express");
const app = express();
const port = 3000;

app.get("/", (req, res) => {
  res.send("Hello World!");
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

Note that in the traditional Express.js example, app.listen specifies the port to which it must listen, requiring it to be continuously running to handle requests.

Next.js covers all traditional backend features, including middlewares, parsing, authentication, and even serverless functions.

Creating the API Route

Route Handlers allow you to create custom request handlers for a given route using the Web Request
and Response
APIs.

Route Handlers are defined in a route.js|ts file inside the app directory:

//app/api/route.js
export const dynamic = "force-dynamic"; // defaults to auto
export async function GET(request) {}

Route Handlers can be nested inside the app directory, similar to page.js and layout.js. But there cannot be a route.js file at the same route segment level as page.js.

While Route Handlers can be nested inside the app directory, similar to page.js and layout.js, it's crucial to avoid having a route.js file at the same route segment level as page.js. A recommended practice is to keep routes separate in another folder, commonly in /api/*.

For instance, if you need a route at /api/users, create a users folder inside the api directory and then add a route.js file inside it. This route will correspond to /api/users.

This route will point to /api/users.

Supported HTTP Methods

The following HTTP methods
are supported: GET, POST, PUT, PATCH, DELETE, HEAD, and OPTIONS. If an unsupported method is called, Next.js will return a 405 Method Not Allowed response.

This is esentially everything you need.

To handle a GET request, you simply write a GET function inside the route.js file.

export async function GET() {
  return Response.json("Hello, Next.js!");
}

You return the response as you would return from any regular express server.

For example ,

//app/api/items/route.js
export async function GET() {
  const res = await fetch("https://data.mongodb-api.com/...", {
    headers: {
      "Content-Type": "application/json",
      "API-Key": process.env.DATA_API_KEY,
    },
  });
  const data = await res.json();

  return Response.json({ data });
}

Similarly, and within the same file, you can use all other HTTP verbs.
To witness this specific API in your browser, go to: http://localhost:3000/app/api/items.
That's it! It's simple and intuitive.

Components and Optimisations in Next.js - Part 3

Pratham Dupare — Tue, 02 Apr 2024 04:50:36 +0000

Introduction

Next.js comes with a variety of built-in optimizations designed to improve your application's speed and Core Web Vitals
.

Built-in Components

1. Images Component:

Utilizes the native <img> element.
Optimizes image performance by implementing lazy loading.
Automatically resizes images based on the device size for improved responsiveness.

//app/page.js
import Image from "next/image";

export default function Page() {
  return (
    <Image
      src="/profile.png"
      width={500}
      height={500}
      alt="Picture of the author"
    />
  );
}

The Image Component requires the following properties: src, width, height, and alt.

2. Link Component:

The <Link> component in Next.js is a React component that extends the HTML <a> element. It plays a crucial role in providing prefetching and enabling client-side navigation between routes. This component serves as the primary means of navigating between routes in a Next.js application.

Built on the native <a> tags.
Prefetches pages in the background, enhancing page transition speed.
Facilitates faster and smoother navigation between pages.

import Link from "next/link";

export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>;
}

href (required)

The path or URL to navigate to.

<Link href="/dashboard">Dashboard</Link>

Linking to Dynamic Routes

//app/blog/page.js
import Link from "next/link";

function Page({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  );
}

For example, you can generate a list of links to the dynamic route app/blog/[slug]/page.js:

3. Scripts Component:

This is self-explanatory, this let's you run scripts for a specific components.

Implemented with the native <script> tags.
Provides control over the loading and execution of third-party scripts.
Enables efficient management of external scripts for better overall performance.

import Script from "next/script";

export default function Dashboard() {
  return (
    <>
      <Script src="https://example.com/script.js" />
    </>
  );
}

Required Props for Script Component in Next.js

The <Script> component in Next.js requires the following property:

src:
- Type: String
- Description: A path string specifying the URL of an external script. This can be either an absolute external URL or an internal path.
- Requirement: The src property is required unless an inline script is used.

Optional Props :

Prop	Example	Type	Required
`src`	`src="http://example.com/script"`	String	Required unless inline script is used
`strategy`	`strategy="lazyOnload"`	String	-
`onLoad`	`onLoad={onLoadFunc}`	Function	-
`onReady`	`onReady={onReadyFunc}`	Function	-
`onError`	`onError={onErrorFunc}`	Function	-

For a comprehensive guide on Next.js components, refer to the Api Reference/Components section of the official Next.js documentation.

Static Assets

The Next.js /public folder serves as a convenient location for hosting static assets such as images, fonts, and other files.

Files stored within the /public directory can be efficiently cached by Content Delivery Network (CDN) providers. This caching mechanism enhances the delivery speed of assets to users, resulting in a smoother browsing experience.

Metadata

Next.js Metadata API for Improved SEO and Shareability

Next.js provides a Metadata API that allows you to define your application's metadata, including meta and link tags inside the HTML head element. This is crucial for enhancing SEO and improving web shareability.

There are two methods to add metadata to your application:

Config-based Metadata:

Export a static metadata object or a dynamic generateMetadata function in a layout.js or page.js file.

File-based Metadata:
- Add static or dynamically generated special files to route segments.

Regardless of the method chosen, Next.js will automatically generate the relevant <head> elements for your pages. Additionally, you can create dynamic Open Graph (OG) images using the ImageResponse constructor for a more customized and engaging web sharing experience.

To define static metadata, export a Metadata object from a layout.js(we have already seen in previous chapter) or static page.js file.

export const metadata = {
  title: "...",
  description: "...",
};

export default function Page() {}

These components and elements cover the fundamental requirements for constructing a speedy and responsive Next.js application.

Server components and Client Components in Next.js - Part 2

Pratham Dupare — Tue, 02 Apr 2024 04:49:10 +0000

Server components

By default, Next.js uses Server Components. This makes server rendering possible without any configuration and you can opt into using Client Components when needed.

Reacr Server Components allow you to write UI that can be rendered and optionally cached on the server.

Why Server Rendering

There are a lot of benefits of server side rendering such as :

Data Fetching: Fetching data on the server improves performance by reducing client-side data retrieval time and the number of requests.
Security: Keeping sensitive data and logic on the server, such as tokens and API keys, prevents exposure to the client, enhancing security.
Caching : Server-side rendering allows for caching, improving performance and reducing costs by reusing results across requests and users.
Bundle Sizes: Large dependencies impacting client bundles are moved to the server, benefiting users with slower internet or less powerful devices.
Initial Page Load and FCP: Server-generated HTML enables immediate page viewing without waiting for client-side JavaScript execution.
SEO and Shareability: Rendered HTML aids search engine indexing and social network previews for better SEO and shareability.
Streaming: Server Components enable rendering in chunks, allowing users to see parts of the page earlier, enhancing the user experience.

Rendering

So how are server components rendered?

On the server, Next.js uses React's API to start rendering. When requested on client, the html is used to immidiately show a fast non-interactive preview on the route.

Static and dynamic rendering

Static Rendering (Default):
Routes are pre-rendered at build time or in the background, then cached and stored. This is great for content that doesn't change per user, like static blog posts or product pages.

Dynamic Rendering:
Routes are generated for each user when requested. This is useful for content that is personalized or relies on information like cookies or URL parameters, which can only be known at the time of the request.

As a developer you don't have to choose static or dynamic rendering.

Client components

Client Components allow you to write interactive UI that is prerenderd on the server and use client JavaScript to run in the browser.

Benefits of doing the rendering on the client are :

You can use states, use state, effects and event listners on client components and they can provide immidiate feedback to the user and update the UI on client side.
Browser APIs like geolocation and localStorage can be accesed.

Using Client Components in Next.js

To use a Client Components, you can use the React "use client" directive at the top of a file.

'use client'

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

That is all you need to convert server components to client components.

Note - If you use state, effects, browser APIs without specifying the client component by "use client", Next.js will thorow an error.

Full page load

To optimize the initial page load, Next.js will use React's APIs to render a static HTML preview on the server for both Client and Server Components. This means, when the user first visits your application, they will see the content of the page immediately, without having to wait for the client to download, parse, and execute the Client Component JavaScript bundle.

Conclusion

Server and Client Components enhance website performance, conserve data, and are especially advantageous for low-powered devices. You have the flexibility to choose when to employ client components as needed!

Introduction to Next.js - Part-1

Pratham Dupare — Tue, 02 Apr 2024 04:45:28 +0000

Introduction

What is Next.js?

Used by some of the world's largest companies, Next.js enables you to create high-quality web applications with the power of React components.

Next.js serves as a React framework designed for developing full-stack web applications. By leveraging React Components for creating user interfaces, Next.js extends functionality and streamlines optimizations.

Beneath the surface, Next.js handles the abstraction and automatic configuration of essential React tooling, such as bundling and compiling. This empowers developers, whether working individually or within a team, to concentrate on application development rather than intricate configuration details.

With Next.js, building interactive, dynamic, and high-performance React applications becomes a more efficient and focused process.

Prerequisites:

This is meant to be easy for beginners, but I want to set a starting point. This helps keep the focus on Next.js features.
It's recommended to know a bit about HTML, CSS, and React to make the most of this series.

Installation

You can start a new Next.js app using create-next-app.

Simply run:

npx create-next-app@latest

This command initiates a setup process with prompts:

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

You can optionally use a src directory in the root of your project to separate your application's code from configuration files.

Note: The latest versions of Next.js use the 'app' router, we will be using that in this series.

Running the Dev Server

Run npm run dev to start the development server.
Visit http://localhost:3000 to view your application.
Edit app/page.jsx file and save it to see the updated result in your browser.

Open your project in your preffered text editor or IDE.
I use Neovim.

Routes

Next.js uses a file based routing, where each folder in app folder represents a route.
A special page.js file is used to make route segments publicly accessible.

For example:
Open the file in app/page.js and remove everything and return only a <div>This is home route</div>

Your page.js should lool like:

export default function Home() {
  return (
    <>
      <div>This is home page.</div>
    </>
  );
}

Now, if you visit https://localhost:3000/, You should be able to see the text 'This is home route'

If you make any folders inside app directory, for example: add folders app/about or app/contact and add the respective page.js files inside.

Populate it:

// app/about/page.js
export default function About() {
  return (
    <>
      <div>This is about page.</div>
    </>
  );
}

Now visit https://localhost:3000/about and you'll see text This is about page.

Layout page

A layout is UI that is shared between multiple routes. On navigation, layouts preserve state, remain interactive, and do not re-render. Layouts can also be nested.

You can define a layout by default exporting a React component from a layout.js file. The component should accept a children prop that will be populated with a child layout (if it exists) or a page during rendering.

Let's understand this with and example.

Root Layout

The root layout is defined at the top level of the app directory and applies to all routes. This layout is required and must contain html and body tags, allowing you to modify the initial HTML returned from the server.

//app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {/* Layout UI */}
        <main>{children}</main>
      </body>
    </html>
  );
}

If you want to display a Navbar on every page of your app, place it in the layout page.

Create a simple Navbar component in app/components/Navbar.jsx

//app/components/Navbar.jsx
const Navbar = () => {
  return <div>Navbar</div>;
};

export default Navbar;

Put Navbar component in app/layout.js

//app/layout.jsx
import { Inter } from "next/font/google";
import "./globals.css";
import Navbar from "@/components/Navbar";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Navbar />
        {children}
      </body>
    </html>
  );
}
export default Navbar;

Now you can see Navbar in every page you visit, for example on https//localhost://3000/about, you'll see:

Navbar
This is about page.

Note: You can import anything with @/name_of_component

app/layout.js also contains metadata for your site.

export const metadata = {
  //This is title of your site.
  title: "Create Next App",
  description: "Generated by create next app",
};

Conclusion

In this blog, we learned about what Next.js is and how routes and layouts work in Next.js.

Minimal notetaking with Neovim and Obsidian.

Pratham Dupare — Mon, 01 Apr 2024 06:50:44 +0000

WHY?

Several years ago, I experimented with Obsidian for a while, finding it useful initially. However, as an advocate for free and open-source software, I discovered that Obsidian wasn't open-source, prompting me to abandon it.

Present Situation

By 2024, I found Neovim to be immensely satisfying, although not for note-taking purposes. My needs were simple - I required a platform to jot down daily tasks, links, or to-dos, without any frills. While I attempted to use Neovim for this, the challenge arose when I wasn't always near my laptop. Hence, I sought a solution to synchronize my notes with my phone. My initial thought was to sync them using Syncthing (which I'll discuss further). However, I still needed to access the notes through a text editor on my phone, which wasn't ideal.

Solution

One day, I stumbled upon a YouTube video featuring TJ DeVries using Obsidian for note-taking. I was intrigued - how could a core Neovim maintainer use Obsidian? Upon researching, I discovered that Obsidian offered a Vim mode, which delighted me. However, this didn't fully address my issues:

Even with Obsidian's Vim mode, I often forgot to open the app.
Despite the Vim mode, I still had to resort to using the mouse to navigate between notes. While Obsidian provided shortcuts, it felt cumbersome to learn them solely for note-taking purposes.

Then it struck me - I could edit the notes directly within the folder where the Obsidian vault was located, simplifying the process significantly!

The Setup

Laptop

I installed Obsidian solely to create the vault/folder in my home directory. I would then use Vim to access it and make any necessary changes, while Syncthing handled the synchronization in the background.

Syncthing

What is Syncthing?

Syncthing is a continuous file synchronization program that securely synchronizes files between two or more computers in real-time. Your data remains private, allowing you to choose where it's stored and whether it's shared with third parties.

I installed Syncthing on both my laptop and Android device, linking it to my Obsidian folder. You can find tutorials on how to do this by watching videos from creators like Mental Outlaw or DistroTube.

This setup ensured that my folder was synced in real-time whenever both devices were online!

Android

On my Android device, I installed Obsidian and Syncthing, selecting the previously created/synced folder from Syncthing.

Now, I could view and edit my notes wherever I wanted, with changes almost instantly reflected on my desktop too!

Moreover, this setup essentially provided two backups of my notes on separate devices!

I also considered creating a Git repository and writing a script to run a cron job for automatic backups on GitHub. After all, shouldn't Microsoft monopolize everything, right?!

Conclusion

There's no conclusion - I'll continue using this setup indefinitely, or until I decide to explore something entirely different. Who knows what the future holds!