DEV Community: Saurabh Sharma

My Minimal Web Development Setup

Saurabh Sharma — Mon, 08 Aug 2022 06:25:00 +0000

This is the setup I use daily to get things done as a full-stack web developer. I love knowing about tools other people are using and here I'm sharing my exact set up so it can give inspiration to others. I will try to keep this guide updated.

Laptop and OS

My main computer at the time of writing is an early 2020 Macbook pro (not M1) I'm really happy with the laptop but chances are I would upgrade to M2 MacBook air when it comes out 🤞. I use mac os but I don't think there is anything that makes it any better than windows 11 or Linux in general, I used to use windows in the past and the only reason I'm using macOS is that I can test and debug websites on safari if I ever need to.

Apps

Spotlight

I use macOS's Spotlight to open apps, find files, and just get around the OS. I rarely ever use Launchpad to open apps.

Firefox

I use Firefox as my default browser. I find chrome's design a bit too rounded and I don't use safari because I don't think it's good for me to get locked in apple's ecosystem.

I use very few extensions. uBlockOirgin, Bitwarden, React Devtools and Grammarly are the only extension I have installed.

Visual Studio Code

I have tried many editors in the past, I have tried Sublime Text, VIM, Webstorm, and everything in-between but VS Code feels the one with the best defaults and most active development. I don't use (n)vim because of its configuration-heavy nature. I have written another post about my exact setup in visual studio code and with all the plugins I use. bottom line I'm pretty happy with vs code and I don't think I will be changing editors anytime soon.

Bitwarden

Bitwarden is my password manager of choice. I'm still on the free plan and I don't have any complaints. I don't like the UI that much but on the functionality side of things it's good enough, It gives everything you might need from your password managers even in the free plan.

Obsidian

I use Obsidian for taking notes and writing posts. I have tried Notion, and Evernote in the past. Evernote feels kind of bloated and tailored for more advanced use cases and Notion is more tailored for teams and people who need very customized workflows, I just need a Markdown-based editor and cloud syncing. I have also tried Simplenote it was really good but there were two problems (1) it didn't support uploading images (2) It doesn't support folders so everything was flat and very hard to find.

Insomnia

Insomnia is a testing tool for graphql and REST APIs. I use it for testing our backend and sometimes external 3rd party APIs

Xcode

I recently tried swift UI and it looks super cool. The UI layer is inspired by React and its cross-platform atleast in the Apple ecosystem.

Postbird

Postbird is a GUI for Postgres database nothing special I use it for creating new users/databases and sometimes connecting to a remote database.

Slack

Our company uses slack for communication not much to talk about it, I don't use any custom themes or anything just have a few custom icons installed.

Homebrew

Every other operating system comes with a preinstalled package manager (even windows 11 has winget) but you have to use this third-party service on macOS. It works well but I wish mac had something native for this.

NVM

Node Version Manager or NVM helps you to use different versions of Node for different projects I don't work on projects that require a very specific version of node but it makes updating node easier so I have it installed.

Default Mac Terminal

I use the default macOS terminal. I never found a use case for iTerm so I stick to the native terminal. I have increased the font size to 14 and that's all the customization I have done to my terminal.

Excalidraw and Figma

I use this to make flow charts and rough design sketches. Excalidraw is good for doing whiteboard-like problem-solving.

And sometimes when I need to create a UI mockup, I use Figma for that.

Conclusion

I have tried to keep my setup minimal I feel once you start customizing things you just spend a lot of time on a never-ending quest for the perfect setup and end up spending more time in setup than what it would save you. You should watch this video by mpj for some context.

Originally posted on itsjzt.com

My Visual Studio Code setup for Full Stack Web Development

Saurabh Sharma — Mon, 11 Apr 2022 16:44:00 +0000

I have been using visual studio code for the last 3 - 4 years and even though I don't like how resource-intensive it is but when it comes to features and customization it never disappoints me. I'm really loving the setup I have now so I thought I should write about my current vs code setup.

About me and my work

I'm a full-stack web developer, I primarily work in Typescript. Our frontend is uses React, Apollo Client, and Next.js (when server rendering is needed). In Backend, we use Nodejs, Express, GraphQL, and Prisma and for deployments, serverless with Github CI/CD.

Theme

I use the default vs code theme Dark + most of the time and other times I use Github Dark

If I'm feeling super adventurous I use a Slack Theme which is a light color theme. It has a few bugs though.

Font and Settings

My font of choice is Cascadia code by Microsoft and out of all the ligatures-based fonts I have tried Cascadia code and JetBrains Mono are the best two fonts in my opinion.

Extensions

EsLint: For linting in JS/TS.
GitBlame: shows blame information in the status bar I use instead of Gitlens because I don't need all the other stuff.
Github Copilot: Autocomplete with AI. if you haven't tried it, it is so cool. join the waiting list.
Import Cost: Super helpful in making sure you don't import heavy dependencies in your frontend.
Prettier: Code formatter
Quokka.js: A nice little tool to help you debug your code.
TODO Highlight: Highlights // TODO: and // FIXME: comments in code.
Wakatime: To track my coding related stats.
VIM: for times when I feel like I need to use vim's keybindings (disabled most of the time).

Language Support and Intellisense Extensions

Env: language support for .env files
GraphQL: syntax highlight graphql queries
Prisma: syntax highlight and IntelliSense .prisma files
liquid language support: syntax highlight liquid files
Svelte for VS Code: syntax highlight and IntelliSense .svelte files
Tailwind CSS Intellisense: Intellisense for tailwind classnames
language post-css: language support for post CSS which is used for compiling in tailwind

Extensions I used to use but are obsolete in 2022

Bracket pair colorizer
NPM IntelliSense
path IntelliSense
color picker
setting sync
auto close HTML tags

Their functionality is now already available in vs code either through a setting or directly out of the box.

Can I see your desk setup?

Saurabh Sharma — Tue, 22 Feb 2022 17:34:27 +0000

Because why not

This is my setup at work

Keyboard: Keychron K2
Monitor: don't remember the model number Samsung 32 inch curved
Laptop: Legion Y540

Neat way to handle array and individual inputs in same function

Saurabh Sharma — Mon, 31 Aug 2020 14:27:08 +0000

Lets say we need to make a function doSomething. we need to do it in a way so that it can handle both arguments: (1) a string and (2) an array of strings.

To achieve that previously I used to do something like this:

function doSomething(strs) {
  function _doSomething(str) {
    // some mysterious stuff happening here
    console.log(str)
  }

  if (Array.isArray(strs)) {
      return strs.map(str => _doSomething(str))
  } else {
      return _doSomething(strs)
  }
}

doSomething(["hello", "world"])
doSomething("hello")

now since I learned recursion I do this:

function doSomething(strs) {
  if (Array.isArray(strs)) {
      return strs.map(str => doSomething(str))
  } else {
      console.log(strs);
  }
}

doSomething(["hello", "world"])
doSomething("hello")

cover Photo by pepe nero on Unsplash

Level up your CLI with these 5 tools

Saurabh Sharma — Sun, 30 Aug 2020 14:32:44 +0000

starship is a cross platform terminal prompt. It works with ZSH, FISH, BASH and even Powershell. It has lots of customization options. It shows git status, package info, current folder and lots of stuff.

z lets you jump to any folder by just its name no matter how deeply nested the folder structures is. Recently I'm working on a project with amplify which generates deeply nested lambda functions, thanks to z moving between functions is effortless. Z takes some learning so you have to cd around for a bit, after that, you can use z to auto jump.

FZF & Ripgrep are useful utilities if you use vim as your text editor. FZF is a fuzzy finder like ctrl+p in vscode and sublime text. Ripgrep is a grep replacement that respects .gitignore and with some other sane defaults.
wipe-module deletes node_modules of non-active projects. If you work in javascript/typescript, you need to free some space definitely try this package.
ngrok I have used this tunneling service to get https addresses for local testing. very handy while making OAuth lambdas. It also makes sharing your local development server very easy.

Cover Photo by bady abbas on Unsplash

Understanding Svelte's $: (dollar label) syntax

Saurabh Sharma — Tue, 18 Aug 2020 14:53:00 +0000

In the long list of cool features of svelte, The one which I use more often is this dollar label thing. Initially, it looked strange to me but later I realized it is a valid javascript syntax. You can use it for doing side effects like useEffect of React, there is also a syntactic sugar way of declaring computed properties.

Doing side effects on state change

Let's say we have a messaging app. You need to change the title when a new unread message comes and you need to update title when the message is read. Traditionally, we will make a function which will update the title and use that function in both places (1. where we are getting new messages from server 2. event listener on user clicking mark as read) but with the svelte's approach we can do this

$: {
    let unreadMessages = messages.filter(m => m.read === false);
    document.title = `${unreadMessages.length} unread messages`;
}

with this approach, we can just change the value of messages in both the places (1. where we are getting new messages from server 2. event listener on user reading the message) and it will be changed in the title. One thing to notice is unlike useEffect of React you don't have to explicitly write the dependencies of this block. The component would be something like this

Computed properties

A computed property is one that will be recalculated if the property it dependents on changes.

Let's say we get another requirement, we also need to show the numbers of unread messages to users above the message list. Since we already have the list of unread messages, we can copy the same logic in the template to show the unread messages or we can do this.

$: unreadMessages = messages.filter(m => m.read === false);
$: {
    document.title = `${unreadMessages.length} unread messages`;
}

here we declared a computed property (unreadMessages). Essentially unreadMessage is a variable that will be recalculated if messages property change. Now we can use this unreadMessages array in the template to show numbers of unread messages.

Why most static typing example show a problem that can be solved by a test.

Saurabh Sharma — Sat, 15 Aug 2020 06:59:32 +0000

I think there is something I cant see. Whenever someone introduce static typing, they show an example problem that can be solved with a test case.

Instead of comparing how tests would have solved it and how types can solve it, they don't even talk about tests

My favorite people to stay updated in web development space

Saurabh Sharma — Sun, 09 Aug 2020 16:28:00 +0000

Even though JavaScript fatigue has settled down, now we only have a few major UI libraries, state management libraries, routers, and recommended ways of server-side rendering. Now you can calmly make your app without messing with webpack and babel configs. But the pace of innovation hasn't slowed down. Things like GPT-3 are trying to make NLP better than ever before. As a Programmer, our knowledge is a deprecating resource we need to constantly feed it with new things to stay relevant in the market. Here are few people I followed to keep up in web dev space.

Twitter

Addy Osmani's tweets are focussed on improving the webpage's performance. He also tweets about new features in browsers and occasionally does PWA case studies.

Jason Miller created Preact.js a 2KB alternative to React.js. Most of his tweets are about optimizing JavaScript bundles and using modern browser features to make your site faster. He occasionally tweets about games.

Dan Abromov is one of the public faces of the React.js team. He tweets about react.js and JavaScript related things. He occasionally tweets about Netflix content. If you haven't already read, I highly recommend you to take a look at his blog overreacted.io

Steve Schoger tweets about design and tailwind CSS. You should also look at his Youtube channel where he tries to make site's design better

Evan you is the creator of the very admired framework Vue.js. Currently, he is also working on a better bundler Vite.

Wes Bos is an independent web developer. He tweets about tricks and tips. He has created many high quality courses some free some paid. He co-hosts the podcast syntax.fm

Sarah Edo tweet about vue.js, SVG, and animations. She is in the core vue.js team and VP of developer experience at Netlify.

Guillermo Rauch is the CEO of vercel (formally Zeit). He tweets about Next.js, React.js, and Server-side rendering.

Reactjs is the official twitter account of React.js. Tweets include new react.js features.

Vuejs is the official twitter account of vuejs. Tweets include new vue.js releases.

Julia Evans tweets about easy explanation to CS-related things.

Adam Watham is the creator of tailwind css. He tweets about tailwind, CSS, Laravel, and other design-related things.

Cory House helps companies transition to react.js. His tweet includes React.js and occasionally he writes book reviews.

Eric Elliot talks about javascript, functional programming, and GPT-3.

Getify is the author of you don't know JS. he talks about weird javascript behaviors.

Kent C. Dodds tweet about new things in javascript and React.js

Rich Harris tweets about the modern web (SPA and frontend tooling), and svelte.js.

Youtube

fun fun function is great channel to learn functional programming and JavaScript in general. Even though MPJ has left the channel so no new content will be added but it still has lots of good content.

wesbos's youtube channel has over 100 thousand subscribers probably because he uploads videos of his free tutorials there. He also uploads some quick explainer topics on youtube.

Leveluptuts is run by Scott tolinski. He constantly adds new content related to web development including React.js Svelte.js and react spring animations. A lot of his content is paid which is on his site but still lots of good content.

podcast

Full stack radio: is hosted by Adam watham. He regularly interviews famous people in web dev space.

Syntax.fm is hosted by Scott tolinksi and wesbos, it is not an interview podcast. Mostly these 2 people talk about new things happening in webdev and classic questions in this space.

dev.to

Lydia Hallie visualize common javascript things like CORS, Event loop, Promises

Ananya Neogi write about things that can be achieved using vanilla HTML, CSS.

Emma Bostian writes about UX, basic CS topics, and JavaScript.

Zell Liew write about CSS and JavaScript, express.js things.

Jacob Herrington posts about easy explanations, tips, and tricks, along with some discussion posts.

Vaidehi Joshi is famous for his BaseCS series. she posts about underlying computer concepts like trees, searching, distributed computing, graph.

misc

If you are interested in things related to computers in general, which don't quite fit in web dev space then here are few other resources for you.

Computerphile youtube channel adds new videos regularly about computer science topics. their recent upload includes GPT 3, AI-related things, XSS issues, SQL injection.

Liveoverflow is a channel for pentesting and hacking its upload includes crazy XSS attacks, CTFs, and other common security-related things.

Game makers toolkit or GMTK (for short) is a youtube channel about understanding game mechanics, and game reviews (they are not that common)

when multitask and when one task at a time

Saurabh Sharma — Sun, 05 Jul 2020 11:51:12 +0000

For a while I was trying to listen to podcasts while I was coding; initially, it felt right but the more I did it the more it felt wrong.It was nice till I was doing tasks that don't require much analytical thinking but when I was doing anything which took a lot of brain power while listening to some podcasts, it doesn't work, I simply can't think. When I realized this I researched on the topic of multitasking and here is the gist of it:

1. History of Multitasking

first of all the work multitasking wasn't made in the for humans tasks, it was made for computers. In computers, it was a more efficient use of resources to run multiple processes when one process was waiting for any external event such as user input or a network request. Initially, computers were doing very fast context switching between tasking which makes it feel like multitasking, later computers got multiple cores parallel processing became possible. Unfortunately, Neither human brains are good at context switching nor we have multiple cores.

2. When you should focus on one thing at a time

According to some experiments, the human brain can be trained to better multitasking, but even after extensive training; how well you can multitask depends on the kind of work you're doing. Difficult task or tasks that require high creativity are much harder to multitask.

There are some popular beliefs about women being a better multitasker than men's, but there isn't enough data to assert that proves that. Most of the theories are based on evolutionary explanations like Hunter-Gatherer Hypothesis.

People have a limited ability to retain information, which worsens when the amount of information increases so if you are doing a task that requires keeping a lot of data in mind, It will be even better to split the tasks into smaller chunks which require fewer things to keep in mind.

3. Often focussed work is more valuable than shallow work

Most of the time in the real world, the reason for multitasking is because of the vast stream of constant data thrown at us. Your news app wants you to read this breaking news, Your game wants you to collect these new coins, Your friends have posted these new pictures, 30 people are talking about the dog pic you uploaded yesterday. These all are shallow tasks, they don't take a lot of time, but they distract you and their return of investment isn't big.

Focussed tasks are the opposite of them, they require more time to do, They require more creativity and thinking but they yield big results, often they are related to some long term goals.

You should be prioritizing focussed work and try to minimize shallow work. Shallow work is important but more often they aren't as valuable since they can be done by anyone or can be easily learned.

Cover pic credits: Thanks to Marvin Meyer for sharing their work on Unsplash

Try these 4 languages from 4 corners of Programming

Saurabh Sharma — Sun, 28 Jun 2020 11:48:00 +0000

There are thousands of programming languages, all having features unique than others. There are some more readable, others more performant, some are simple, others are complex. Here I'm presenting you 4 different programming languages from 4 different sides of programming. I invite you to try each of them, enjoy their strengths, find their weaknesses. Each one of them is very different than the others. They each are better for some kinds of problems. They will teach you the same problem in different ways.

1. C

While working on the Unix operating system at Bells Lab, Dennis Ritchie wanted a language that will suit the task of writing parts of the Operating System. He wrote C language taking inspiration from BCPL and B.

A lot of C's syntax maps directly to machine code. C has the power of assembly but unlike assembly, it is cross-platform, If you wrote your code with portability in mind then it can work on multiple OSes and CPU architecture without much code changes.

When you want to talk directly to the machine, removing all the abstractions in between you and the machine, then C is the language for that kind of tasks.

Here is some C code

int square (int number) {
    return number * number;
}

and here it the assembly code generated by the compiler

square(int):
        push    rbp
        mov     rbp, rsp
        mov     DWORD PTR [rbp-4], edi
        mov     eax, DWORD PTR [rbp-4]
        imul    eax, eax
        pop     rbp
        ret

2. Smalltalk

When I made up the term object-oriented, and I can tell you I did not have C++ in mind.
-- Alan Kay

Smalltalk was created to teach kids programming. Creator Alan Kay had revolutionary ideas about how programming should be done. He pioneered the idea of individual units communicating through message passing. He believed that languages should be built around a generalized concept. Smalltalk and Object Oriented Programming revolutionized the world of programming but certainly not a good way, the world misunderstood the whole idea of Object Oriented Programming. Classes became the epic center of Object Oriented Programming.

here is some smalltalk code:

"Return the weekday of a date"
'2013/5/7' asDate dayOfWeekName

"Save the HTML source of a web page to a file"
'http://www.pharo.org' asUrl saveContentsToFile: 'page.html'

"Count the number of, or show the leap years between two years"
(1914 to: 1945) count: [ :each | Year isLeapYear: each ].
(1895 to: 1915) select: [ :each | Year isLeapYear: each ].

If you already know ruby, smalltalk will not take a lot of time to grasp, but its live debugger is something from another world.

3. Lisp

“Lisp is a programmable programming language.”
— John Foderaro, CACM, September 1991

If you are looking for a language in functional programming world, there is a good chance you will hear about lisp. Lisp is a minimalist kind of programming language. Its has virtually no syntax. Lisp is one of those languages which is enlightening. Currently the most popular lisp variant is Clojure.

Lisp is programmable. which means if you don't like any constructs of of the language, you can override it with what works better for your team. Imagine if javascript was lisp we could fix a lot of its bad parts.

here is some clojure code:

;; define a var
(def a 42)
;; => #'user/a

;; call a function named `+`
(+ a 8)
;; => 50

;; call a function named `even?`
(even? a)
;; => true

;; define a function that returns the remainder of `n` when divided by 10
(defn foo [n] (rem n 10))
;; => #'user/foo

;; call the function
(foo a)
;; => 2

;; if else 
(str "2 is " (if (even? 2) "even" "odd"))

4. Haskell

Haskell is the language grown out of mathematics world, It is a statically typed (perhaps the best kind of static typing), functional programming language. Unlike most mainstream static typed languages it has strong type inference so you don't have to write types everywhere but you still get type safety.

If you are writing in statically typed language, you should try Haskell, it has very strong type inference. You can see the below code which has type safety but I didn't wrote any types.
Haskell has pattern matching, recursion, list comprehension, first class functions and all the other cool stuff of functional programming languages.

-- Using recursion (with the "if then else" expression)
factorial n = if n < 2
              then 1
              else n * factorial (n - 1)

cover image credits: Thanks to Ian Schneider for sharing their work on Unsplash

What javascript would look like if they could make breaking changes in it.

Saurabh Sharma — Thu, 04 Jun 2020 17:24:38 +0000

We all know most of the problems in javascript is because of the fact that it was designed in very short period of time. Result of that we have lot of bad parts and w3c dont want to break backwards compatiblity of web so they don't fix it.

But just for this post imagine if we could make breaking changes in javascript.

What it would look like then?

What are some exciting compile to Js languages?

Saurabh Sharma — Thu, 04 Jun 2020 14:39:44 +0000

I mostly work with javascript and I and looking to learn a new language, better if it is compile to js, then I can use it in my projects.

P.s. I'm already using typescript