DEV Community: Pratham Sharma

Short appreciation for dev tools

Pratham Sharma — Fri, 13 Dec 2024 18:31:42 +0000

I have been using zed for quite a while now and here’s my experience / appreciation of zed. Or any dev tool that is made in a spirit of tooling, passion and preferences.

Neovim and me
I have been a long time vim / neovim user and have dabbled with many editors. Even tried developing my own but that didn’t pan out well. Initially I used vscode like everyone else. Then switched to neovim due to sheer speed and performance boost it gave over vscode. I have also always adored lua so neovim was very good experience for me. But I soon I got caught up with work and often forgot to update my config and soon I was running way behind on latest neovim features. I still really like neovim and it’s philosphy and have it on my machine.

Zed - my current daily driver

Initially I was really skeptical of zed when it was still a browser based downloadable editor. Also I am still not big on all that collabrative editing thing. But here’s the thing. It’s quite faster than vscode. Not as feature rich maybe. I often compare it with sublime. I think of it as sublime with better vim encodings. I am huge fan of their in-built keymaps that they give which fits so well with editor behaviour. Extensions are currently community maintained which is fine with me but there are lot of my favourite ones missing like wakatime ( huge bummer ), full fledged git support ( I use lazygit ), no zed mode and more that I can’t think or right now. But I can live without those things. I like the sheer no fuck around policy. It’s simple and all the shenanigans it has are searchable or just easy to use. So it’s all install and go with neovim like speed and keybinds. This was what I was looking for all along. Maybe I will change my mind in future but for now zed does it.

Novelty bias

Well I can try and explain with some logical points but that’s all useless. It’s all a matter of preference. I have deep appreciation for anyone who tries to make tools targetted for developers. Open source tools especially. So I would anyday pick a project where developers are trying really hard to give people a preference and make something authentic and unique. It’s really a small bubble to live in and well I would like to have a bigger bubble. So If I see a tool that does something which I already have a tool even then I would try it. Helix, kakoune, neovim are all smaller editor trying to find a place / preference for someone. Each carries it’s own story. Each software, each tool carrying their person type. So while we have it try and experiment and help in improving it.

Guide To Express Middlewares

Pratham Sharma — Sun, 31 Oct 2021 09:56:22 +0000

A basic definition

Express middlewares are the functions that have access to the request, response and next function in applications request response cycle. The next function calls the next middleware that is succeding the current middleware.

Let's simplify the above statement a bit. So a express middleware is basically a function that has req,res and next as a parameters. For example,

const express = require('express')
const app = express()

function logger(req, res, next) {
  console.log("I am a middleware and I log the text");
  next();
}
app.use(logger)
app.get('/', (req,res)=>{
 res.send("Hellow World!!")
})
app.listen(3000)

Now here I have a logger function which is a middleware. Yup that's how simple a middleware can be. Here the logger function has one thing which other functions don't have. You always have to call next at the end of the middleware. This basically invokes the next or succeding middleware.
For example

function logger1(req, res, next) {
  console.log("I am first");
  next();
}

function logger2(req, res, next) {
  console.log("I am second");
  next();
}

app.use(logger1);
app.use(logger2);

here logger1 is the first middleware and the logger2 is next or succeding middleware.This of course depends on the which function is loaded first in app.use(). So now whenever express calls a callback then these 2 middlewares will do a console.log() before running that callback. If I was to load the logger2 before logger1 then logger2 will console log before logger1.

For example if I add this to last line of previous code then.

app.get("/", (req, res) => {
  res.send("Hellow World!!");
  console.log("I am a callback");
});
// output in the console will be
// I am first
// I am second
// I am a callback

The next function could be named anything else either but by convention it is always named next. So to avoid any confusion we continue calling it next. Also remeber if you don't call next() at the end of the middleware then the middleware will never go to the next or succeding middleware. This means the request will left hanging and will never proceed

Example : Using a middleware to get a object from database

In my app I use following middleware to get a snippet by a certain id provided in a request.

This can give you a gist of where to use a middleware.

function getSnippetById(req, res, next) {
  let snippet;
  try {
    // here Snippets is mongoose schema.
    snippet = await Snippets.findById(req.params.id);
    if (snippet == null) {
      return res.status(404).json({
        message: "question does not exist",
      });
    }
  } catch (err) {
    res.status(401).json({ message: err.message });
  }

  res.snippet = snippet;
  next();
}

In this middleware I simply check for the snippet in database if it does not exists we return a error other wise I attach the snippet with give header. Now here snippet keyword is a custom header that I provide which I can access in the callback further.
For example if I do

app.get("/:id", getSnippetById, (req, res) => {
  res.status(200).json(res.snippet);
});

now here I didn't use app.use instead I called the middleware directly inside the get request. This is useful because app.use will call the function getSnippetById beforeevery request which is not what we want. So instead we call it only for some function such as when we want to delete, update or get a object(in this case snippet) by a certain id.

I should also mention something called as a error-handling middleware which depends on same concept. You can see more about error handling middleware here.

Conclusion

So we went over how the middlewares are called, what is next function and what happens when we don't call it and also we went over a real world example of a middleware too. To read a better and a detailed explanation checkout the express docs on writing a middleware and also on using a middleware

Trying Out Svelte For First Time

Pratham Sharma — Thu, 07 Oct 2021 13:57:43 +0000

So I have been wanting to re-create my personal website (another blog on this soon). I really like development with next-js. But there's a lot of lot of dependencies which makes it quite a huge app. And I think that a personal website should be as fast as possible. So why not choose something like vanilla html. Well Yea html will work totally fine. But I wanted to try something new. I choose svelte as a the other framework. I wanted to try it for the longest time. And thus I choose svelte.

I like lot of stuff about svelte. The idea of keeping things less complex and fast to code is very likeable. If I would have tried using svelte right after learning js, I think it would be easier than getting used to react. Here's my opinion or more of a description of svelte. I might be wrong about something so pardon me there as I have spent less than a week with svelte.

Also Since I have made the intro this long. I might just say that I don't really want to hate on other framework. I think this opinionism is bad. I just want to keep this a healthy overview of svelte.

About Svelte ✌️

Svelte is a UI framework. Unlike react and friends (or should I say enemies), svelte does not use any virtual DOM. Rather it compiles your code to tiny framework less vanilla js. This makes the app really fast. Also not to mentiont the incredible guide the svelte-tutorial

Components in Svelte 🐻‍❄️

So let's start with what I think the makes all the frameworks worth using, Components. I think making your UI into little components makes UI really easy to manage and program. I am not a frontend guy honestly but I like the fact that I can have multiple elements divided in my UI. Again this post is not on why frontend frameworks are good.

In svelte the components are files with .svelte extension. Not a great change that's just another syntax ( also btw why do all these frameworks create their own custom syntax). But wait you don't have to export the components here. Suppose you have this parent called App.svelte.

<!--Lets' call this component App.svelte and yes this is a html comment-->
<script>
// here is js comment :)
 import MyComponent from "path-to-component/MyComponent.svelte"
</script>

<MyComponent />

and here's MyComponent.svelte:

<!--- MyComponent.svelte --->
<p>
This is my component
</p>

Props in Svelte 🐻

You thought that svelte does not have props. Svelte has export statements to export props or as I like to say 'recognize props' (Not a proper term don't use it).

This is a child component let's call it Weatherdetails.svelte

<!--- Weatherdetails.svelte --->
<script>
    export let answer;
</script>

<p>The weather is {answer}</p>

Let's call the parent component App.svelte.

<script>
    import Weatherdetails from './Weatherdetails.svelte';
</script>

<Weatherdetails answer="humid :\"/>

I like how svelte devs explain how this in not javascript-ish.

this may feel a little weird at first. That's not how export
normally works in JavaScript modules! Just roll with it for now — it'll soon
become second nature.

I am hoping to see it become second nature :)

Reactivity in Svelte 🐨

Again as svelte describes it does not uses any complex state management.According to the svelte website "At heart of svelte is a powerful system of reactivity". This means that you can call javascript inside your html (not literally I just like to think of it this way). Here's the reactivity explained in the good ol' counter app.

<script>
let counter = 0
function increaseCount(){
  count += 1
}
</script>

<h1> Current Count : {count} </h1>
<button on:click={increaseCount}> 
    click to increase count ! 
</button>

Wow that was quick.

Here you can see it's like react state just has a lot less boiler-plate. Also svelte introduces a special thing which is somewhat similar to useEffect hook in react.

<script>
let counter = 0
function increaseCount(){
  count += 1
}
$: square = count * count
</script>

<h1> Current Count : {count} </h1>
<button on:click={increaseCount}> 
    click to increase count ! 
</button>
<p>The square of {count} is {square} </p>

Here the $ looks a little weird. But this basically tells svelte compiler that whenever any of referenced value statement changes do this thing.

Conditional rendering and Await in markup 🐑

To render text conditionally svelte applies a little bit custom markup syntax.

<script>
    let user = { loggedIn: false };

    function toggle() {
        user.loggedIn = !user.loggedIn;
    }
</script>

{#if user.loggedIn}
    <button on:click={toggle}>
        Log out
    </button>
{:else}
    <button on:click={toggle}>
        Log in
    </button>
{/if}

So here according to svelte website again

A # character always indicates a block opening tag.
A / character always indicates a block closing tag.
A : character, as in {:else}, indicates a block continuation tag.
Don't worry — you've already learned almost all the syntax Svelte adds to HTML.

Now this the normal part. Jinja follows same pattern. But wait we have more. Introducing the asynchronous await in markup. Wanna see how this looks. Here

<script>
    async function getCatImage() {
        const res = await fetch("https://api.thecatapi.com/v1/images/search");
        const jsonres = await res.json();
        const imageUrl = await jsonres[0].url

        if (res.ok) {
            return imageUrl;
        } else {
            throw new Error("No image found or something went wrong");
        }
    }

    let promise = getCatImage();

    function handleClick() {
        promise = getCatImage();
    }
</script>

<button on:click={handleClick}>
A random cat 🐈
</button>

<!-- Awaitting the response -->
{#await promise}
    <p>...waiting</p>
{:then src}
    <img {src} alt="a cat"/>
{:catch error}
    <p style="color: red">{error.message}</p>
{/await}

Honestly I was really impressed when I first saw this. This is was so cool see.

Here's the working demo 🐈✨ :

Lifecycle ♻️

Yay! Lifecycle methods. Lifecycle in svelte is quite similar to react.

The most common lifecycle method is onMount. This is basically a function that is executed when component is rendered.
onDestroy is function that runs when a component is destroyed.
beforeUpdate and afterUpdate do what there names suggest run a function before or after the component is rendered.

These were quite similar to the lifecycle methods in react.

The last lifecycle method is tick. The tick function is unlike other lifecycle methods it can be called anytime. It returns a promise that resloves as soon as any pending state changes have been applied to DOM. In simpler words you can say that when you want to ensure that state immediately updates you can run tick function.

Binding the state 🐲

Do you guys remember the old class based components in react where you had to bind the function to specific component. Svelte does something similar but more simpler looking.

<script>
    let name = 'world';
</script>
<input bind:value={name}>

this will change the value of name with input provided. The bind-action (in this case value) may change from element to element.

This Binding

One binding that applies to all is this. You can compare it to something like useRef hook from react. It provides you a reference to a rendered element.

For example you can do something like this ✨:

And now I can use canvas api just like native javascript. I really like the canvas api and wanted to use react but I was not able to get that level of simplicity as in native js. Svelte makes it almost similar to native js

Store 🦄

Store is a way to manage state across the whole app. You may pass down state to childrenusing props but the when you have to share state across various parent components you can use store. A breif overview of stores can be given this way

<!-- Store.js : Here we can initialize store -->
import { writable } from 'svelte/store';

export const count = writable(0);

<!-- And let's subscribe this store to App.svelte -->
<!-- so I can just do --> 
<script>
import { count } from './stores.js';

let count_value;

count.subscribe(value => {
        count_value = value;
});
</script>

<h1>The count is {count_value}</h1>

Stores are a bit complex topic ( not really quite simple once you go through the tutorial ) And I am not gonna cover everything about them in this post. So that may be a different blog for different time. Meanwhile if you really wanna know just go on to the tutorial

Inbuilt Transitions and animations 🐳

This one surprised me. Svelte has inbuild transitions, animation and motions.

<script>
    import { blur } from 'svelte/transition'
    let visible = true;
</script>

<label>
    <input type="checkbox" bind:checked={visible}>
    visible
</label>

{#if visible}
    <p transition:blur>
        Fades in and out
    </p>
{/if}

This piece of code shows how simple it is to implement the fade transition. This is all I wanted from frontend frameworks. Isn't this amazing. I just love svelte now. There are more animation related stuff which you can again see in the svelte-tutorial

Here's a little navbar that I made using svelte builtin transitions :

Conclusion 💫

This was just a breifing of svelte. There is so much more that I didn't cover. I have already link svelte tutorial like 10 times in this blog so not gonna do It again. This post really helped me understand lot of stuff about svelte and also react.

What I think of svelte ? Well I think svelte is amazing. I like it and most of the developers out there like it. It makes lot of things simpler. Obviously it does not kill all the other frameworks and Neither I will start making making all my apps in svelte. Though this aside. I will svelte for lot of apps that I want to quickly setup. This is one thing that I again loved about svelte. The amount of boiler plate that goes in svelte is really low. And not mention the app speed. The above 3 example are really fast in comparisont to those written in react or any other framework out there. Also I recently saw svelte-native which now makes me want to try it.

Overall Svelte is a amazing and lovely piece of technology. God bless the creators of svelte for making it.

Thanks for reading. Please consider following this took a huge amount of time to write. And if this helps you well don't thank me just follow. I post stuff like this or sometime vim related workflow.

Discovering Vim : Netrw

Pratham Sharma — Sat, 02 Oct 2021 10:09:05 +0000

Do you use a file explorer in vim ? I guess it probably is something like this, this or maybe this. While all these are fancy looking with icons and stuff there is a file tree and explorer in vim already. It is not the best file-explorer honestly but it works and is faster than most of these. Yes I am talking about the good ol' netrw.

Now the stuff I am talking here is very limited to basic needs only and you can obviously see :h netrw if you want to know more.

So anyway here's a breif guide. Firstly let's talk what should I be able to do with any file explorer.

add file and directory
delete file and directory

So well let's start with opening some new directory called tmp. Now in this tmp directory suppose I want to add a file. So In vim I do :Explore. Now explore opens netrw for the file-directory ( also try doing explore in any help menu it opens all the files linked to that help article). After Opening Explore you will see a empty directory like this.

Now I wan't to add a file to this directory. I can press % key in netrw and that will show this prompt.

Add the file name press enter and bam! Netrw will open the file in new buffer. Now u can add text to same file and save it. After Saving the file Try doing :Explore again and now you will see the new file.
To remove this file you can press D key that will bring up another prompt looking like this.

You can add a directory by doing d and delete it too with D. This enough for most of the work I need to do with file explorer. I do rest with normal mv or cp. Now let's say you want this netrw to be displayed while editing file and you don't like how netrw looks. Well netrw can be configured with global vim variables. Here's my netrw settings.



" This get's rif of that stupid banner
let g:netrw_banner = 0

" netrw has liststyle types which you can search in \:help netrw
let g:netrw_liststyle = 2 

" If you have wildignore set
let g:netrw_list_hide = &wildignore

" size of window
let g:netrw_winsize = 25

Again Look at :help netrw to see what do these do. Some other good commands are :Lex for opening Lexplore which a split view of netrw. Do :Lex! to get a funky right side view like me. There is also :Hexplore, :Rexplore, :Sexplore and :Texplore. Most of these are for opening netrw in different directions which again is really cool.

Easy way to fish shell

Pratham Sharma — Tue, 13 Jul 2021 17:46:59 +0000

So when I first started linux and went into command line it looked a bit ugly (yeah the bash prompt is ugly initially :p). So well I tried customizing it a bit. Soon after I got bored with bash and I heard about this new guy zsh and then I switched to zsh. And zsh was more powerful than bash cause it had a better completion and a better vi mode. I used oh-my-zsh for most of the time and for themes I went with default one. Besides I also used syntax highlight plugins and autocompletion plugin too. It was all working pretty fine but then I had to move to a new machine and soon I forgot how to install these plugins in zsh. I mean I could have googled but I am quite lazy so I got oh-my-zsh and that was it.

Fast forward to this week I picked this new shell called fish. This blog will be a brief intro to fish from perspective of a zsh/posix shell user.

So fish is a non posix shell which means that your bash scripts don't work here (most of them). Although almost all the unix commands work in fish so you don't have to worry about a missing command for most of time.

Now Some good features that you get in fish by default are auto-completion , auto-suggestion, syntax highlighting and it all works out of box

So let's talk about making fish usable. For example like using aliases and where is the config file?. So generally the config file for fish is in .config/fish/config.fish. You can open this file in any text editor u want.

Inside the file you can add all your configuration and functions like you do in zsh file. Ok what did I wanted to do ? Yeah alias. In fish shell there is nothing called alias rather it is called abbreviations. Abbreviations are almost similar to aliases. According fish's web site " Abbreviations are user-defined words that are replaced with longer phrases after they are entered. "
This means that abbreviations are somewhat similar to snippets. You type the initials and it automatically completes it. Which is wonderful because you get to see the command that you have abbreviated. To set abbreviations you can do abbr -a v nvim in your config.fish

v is the abbreviation and nvim is the completion for it. Also there are minor syntax differences in fish from zsh/posix. Honestly I think that fish's syntax can be called more a bit modernish. Nonetheless you can look at the syntax here .

There are plugins-managers like ohmyzsh available for fish too. Some of them are :

And maybe more I don't know all of them. I personally use fisher because it's quite easy.
For prompt's you have :

Tide I like tide cause it looks exactly similar to p10k and you can also configure it the same way from zsh. It's cool :p.
You can use others like shellder, and starship too.

Note : for nvm users fish does not support nvm instead u get this or something like this.

You can see the way my shell looks.

It all get's completed with a spacebar :)

Yup so that's all about fish. I would really recommend fish to developers because of it's ease of use and setting up. If not using it forever atleast try giving fish a try.

My first PR... I feel really dumb now

Pratham Sharma — Fri, 18 Jun 2021 19:59:46 +0000

So recently I was working on a personal project. And I was using code mirror as dependency in it and I came across a small css bug related to cursor in vim mode. So I did a natural thing and opened a issue, fixed the bug and committed changes.

Before getting any further I want to remind you that this is my first pr and I have never contributed to any opensource project before.

So after I pushed changes I made a pull request and added somewhat okay description. I was happily glaring at the description I added and felt really happy to have made my first pr. And then I noticed the changes I made. I made 153 changes. In all hurry I went to see the changes I made and realize that stupid vscode auto formatted everything in css. And therefore all the css files I changed had extra lines. Well so instead of reverting changes I made a edit in comment (very professional of me) about formatting. And just waited for the maintainer to reply. Maintainer replies after an hour or so. He says no he cannot commit.

Yay there goes my dream to get in netflix. Anyway that was a silly mistake I made. And just to clear I reverted the changes asap and now I am waiting for the maintainer to see and reply. Will edit the article if anything else happens. I really feel dumb. But hey that was a new experience anyway. I will have fun story to tell people future. :|

Edit : My PR was merged by author

VimGore : an interactive game to learn vim

Pratham Sharma — Sat, 15 May 2021 18:13:44 +0000

So I wanted to try MERN stack and thus started out with this idea of creating a game that will provide you with snippets of code which will be corrected by the user using vim mode. So this idea was enough to give me motivation to jump into the project state.

So below is the link to the app. It is not fully featured and I think that it is missing lot of stuff but will be happy to get a overall feedback.

If you have any issues then report in repo :)

For now this is vimgore

(also this was my first proper full-stack project)
Thanks For Reading 😁️
and keep up the hardwork 💪

What I learned after failing to build a Project

Pratham Sharma — Thu, 06 May 2021 15:26:39 +0000

So I have been working on an Image-Editor for react for past few days. And just to clear I have dropped the idea for time being due to lot of reasons. Firstly I was not enjoying the process of developing it anymore. Other reasons were that canvas API is very hard to work in with react. Also I am very aware of all the libraries that make it easier to use but then the application had nothing to offer if it was build on something as Konva or Toast-image-editor. It is very true that I worked on the project for 5 days in row and therefore it was more disappointing to drop the project.

But the project taught me a lot of stuff including how to manage uploading of image files in react,Using context api, how to convert them to base64 and even how to manipulate them. Project also taught me to keep some general things in mind. They are:

Build UI first - Prior to functionality building UI must be given importance. This is so because a well developed UI can help you remain motivated and support the development. Also a good UI is a great step towards clearing the thoughts for further development in my opinion.
Always Plan Well Before Project - So It was not like I did not planned well before developing it was more like I was confused. Well since I had already made the test version in vanilla javascript. I was confident or overconfident to step directly without doing proper research. So an Important take-back is that research. Even if you have the idea. Plan the stack or library you were going to use.
If It’s not working then don’t stress - Yes if it does not work give up on it for the time being and pick it later. Maybe you are just tired of looking at same thing, change the pace, work on something else.

And I guess those were it. I was really disappointed in myself because I was building it since long back. Well I will make sure to pick this up again someday in future till then I will keep up the hardwork on other projects. If you want to share your experiences with failed projects then please do.✌️