designed and built smol prototype this week for lazymail, still working on email sync. 📨

@_buildspace @_nightsweekends

done with designing and setup of monorepo, db, auth and stuff now working on email sync. 🔄

for tech stack i am using turborepo, solidjs + electron for desktop app, solid start + trpc for web app and backend, react native for mobile and supabase for auth and database. ✔️


Progress on LazyMail: Prototypes and Sync

😓 After getting super frustrated by the ux of google analytics..

🌟 I started building a privacy focused, minimal, and super lightweight analytics tool that is really enjoyable to use.

🚀 From now I will be documenting and sharing my journey on building it here on twitter.

Things that I've done so far:
✅ Got the analytics tracking script working (<1.5kb)
✅ Built responsive charts and basic stats
✅ Set up auth and database

... a lotttt of things are remaining and I'll keep you updated with the progress.

I'm also thinking about creating a community for Spark on discord, what do you think? 🤔

Alright, I hope you love the idea, looking forward for your opinions and thoughts 🙌

Have a great weekend ☀️

Building an analytics tool

Today I'm very excited to tell you about the project on which I was working day and night for the past few days! 🥳

So let me introduce you to:
✨ Better Hacker News

If you've used Hacker News, you might have noticed that it's not been updated for a long time and the user experience is not so good.

So for that purpose, I built Better Hacker News − Web App which provides a lot better user experience for HN.

Try it at:hn.vedantnandwana.me

And do you know what is the best thing about it?

It's open source! It means that you can contribute to it if you want to improve it.

New issues and prs are always welcome. Your contributions are highly appreciated.

Github repo: https://github.com/vedantnn71/better-hackernews

Pros:
☑️ Amazing ui/ux
☑️ Completely responsive
☑️ Fast and snappy

Caveats:
⚒ Currently in work in progress
❌ You can't upload or reply

Todos:
⬜ Add animations
⬜ Implement user page
⬜ Optimize story specific seo
⬜ ...

I hope you like the project and I'd really appreciate your feedback on it 🙌

Also, if you want any help related to the project, you can ping me any time on twitter or discord 😄

Launching Better Hacker News! 🥳

⚛️ 7+ cool react libraries to save you a lot of time!

{ A thread 🧵 }

💿 Zustand: simpler alternative to redux

🔗 github .com/pmndrs/zustand

🌈 Chakra UI: one of the best component library. 

🔗 chakra-ui .com

✨ Auto animate: add cool animations in just two lines of code. 

🔗 auto-animate.formkit .com

⚡ Tanstack query: the missing data-fetching library. 

🔗 tanstack .com/query

📃 Formik: build forms, without tears.

🔗 formik .org

🌟 Framer motion: the best animation library I have found so far. 

🔗 framer .com/motion

⌨️ [Bonus!] Tiptap: a rich headless text editor. 

🔗 tiptap .dev

That's it for this thread and I hope you've found it helpful.

Please like this thread if you've found it helpful & got some value out of it.

Make sure to follow @vedantnn7 for more helpful threads and tweets like this on web development.

Thanks a lot for reading this thread 🙌

7+ Cool react libraries to save you a lot of time!

Asynchronous code is one of the most important and crucial topic in javascript that you NEED to learn.

Async javascript and promises simplified, with real life examples!

: 🧵 

0/ In this thread, I'll demystify promises by giving a real life example which you can easily relate and will help you understand them.

Before learning promises we need to learn about async javascript, as every promise is asynchronous.

So let's start with async javascript ⚡ 

1/ Asynchronous aka async javascript allows us to run multiple tasks at once instead of waiting for one task to finish.

Async code can be really helpful when you're running some time taking functions, for eg when fetching data.

2/ Difference between synchronous and asynchronous:

In synchronous code, we wait for a process to finish running, and then we proceed to the next one.

Async code doesn't block the execution flow, it doesn't wait for the operations to be completed like in synchronous code.

TL;DR:
- Async code is executed in parallel 
- Sync code is executed in sequential order 

3/ What is a promise?
Promise is an object, which can only return ONE value at a time, not more or less than that.

Now let me simplify this by giving you an real life example; let's say it's my birthday and I promise my friends to give them a party.

So, in this way:

I'm a producing task as I'm preparing the party, booking the place, ordering food and cake, etc; which is generally time consuming.

And my friends are consuming task, as they are dependent on me, the producing task to be done.

And promise is the link between me, the producer and my friends, the consumer.

Likewise happens in javascript, there is a producing function which returns value to some consumer function or variable.

Summary:
⭐ Producer is generally a time consuming function which can only return ONE value
⭐ Consumer is a function or variable dependent on producer to finish executing  
⭐ Promises act as a link between producing and consumer process.

4/ And a promise can only be:
• fulfilled - The action relating to the promise succeeded
• rejected - The action relating to the promise failed
• pending - Hasn't fulfilled or rejected yet
• settled - Has fulfilled or rejected

Pretty simple and easy, right? Also, one thing to keep in mind is that *promises are always asynchronous*.

Now, let's see how to use promises in javascript ↓ 

5/ How to use promises?
We can create a new promise using the `new Promise()` constructor which takes function as an argument, and that function requires resolve and rejects as arguments.

The `giveParty()` function above checks if the user is well or not, if the user is then it will resolve the promise with a message.

Otherwise if user isn't well than it will reject the promise with an error message

Also, it is always a good practice to reject with an `Error`.

6/ Resources I used to learn async js:
1. javascript .info/async-await
2. freecodecamp. org/news/javascript-async-await-tutorial-learn-callbacks-promises-async-await-by-making-icecream
3. web .dev/promises

Async vs sync image inspired from:
4. shreyanshshah91.medium .com

7/ So in this thread we covered:
✅ What's asynchronous javascript?
✅ Differences between sync and async?
✅ What are promises through an real life analogy?
✅ How to use promises?

You can read the unrolled version of this thread here: https://typefully.com/vedantnn7/WdtySqh

Asynchronous javascript and promises, simplified!

You might have wondered whether javascript is a compiled or interpreted language 🤔

But you know what? it's neither just compiled nor just interpreted 🤯

Here's why 🧵👇

In this thread I will explain why javascript is not considered neither just compiled nor just interpreted. 

So first of all let's discuss what are complied and interpreted langauges. 

1/ What are complied languages?

Code written in compiled languages like c and go is directly converted into binary, which can be directly executed by the processors.

This generally results in faster and more optimised code as compared to interpreted languages.

2/ What are interpreted languages?

In interpreted languages like python, code is not directly compiled to binary, but instead is executed by another program i.e interpreter.

This generally results in slower execution as compared to compiled languages.

3/ Now, where does javascript fits in?

First of all, how javascript is executed totally depends on the runtime environment, for eg v8, spider monkey, etc.

But most of the engines compile and run javascript just at runtime, it is also known as "just in time (JIT) compiling".

4/ What is JIT?
JIT compiling is a mix of both interpreted and complied, it compiles the code to the native code at the runtime itself, so best of both the worlds.

Engines like v8 which is used by node, deno and chromium use jit compiling to speed up the execution.

5/ So code written in javascript is directly compiled to native code at runtime, now we can't say it is just compiled or just interpreted.

One thing to note here is, that v8 directly converts javascript to native code whereas engines like spider monkey first interprets to byte code and then compiles, like java.

6/ Resources to learn more
These are the resources that made me curious and got me to the answer for this question:
- Forum (MUST read): tinyurl .com/is-js-compiled
- Video by hitesh choudhary: https://youtu.be/-1rEsrEau7I

That's it for this thread and I hope you've found it helpful!

I help you become a better web developer by sharing helpful resources and demystifying complex topics.

If this is something that interests you, make sure to follow @vedantnn7.

Thanks for checking this out 🙌

You can read the unrolled version of this thread here: https://typefully.com/vedantnn7/uoZTCHm

Is javascript compiled or interpreted? 🤔

Do you know what's the difference between http and internet? Do you know how internet works under the hood?

As a developer you use internet daily, but you still don't really know how does it work.

Everything you need to know about internet : 🧵 

#100daysofcode

In this thread I will demystify many concepts that may look tricky to you at first like:
☑️ What is ip address?
☑️ What are packets?
☑️ What is tcp
...

So let's start with the thread.

1/ What powers the internet?
Internet is all because of internet protocol suite, it connects billions of machines together to form internet.

Internet protocol suite basically consists of 4 simple layers:
• Application layer
• Transport layer
• Data link layer
• Network layer

2/ What is network layer?
Network layer basically consists of internet provider address, aka ip address. IP address is just a set of unique numbers which helps us in identifying location of different computers.

For eg: you can try entering 76.76.21.61 in your browser.

3/ What is transport layer?
Transport layer consists of something called transmission control protocol (tcp) which allows to send data back and forth to computers. 

The data travels breaks down in the form of small pieces which is known as "packets".

4/ What is data link layer?
These packets are now transmitted by physical devices such as modems, routers, etc before being processed by the receiving computer.

Pretty simple, right?

5/ What is application layer?
Now everything you learned so far is just the hardware part of the internet. 

Things like http, ftp, etc comes in the application layer of the internet, these are software which allows us to unleash the power of it.

So things like http/https are not internet, they are just a part of it. Also, internet is decentralized. It is not owned by any organization or person.

6/ What is http?
HTTP stands of hyper text transfer protocol, which is as you know used to send bunch of html pages to the client when requested with the help of url.

7/ What is url?
URL stands for uniform resource locator, which is used as an alias/shortcut to some server. For example you can access google either by going to google.com or by entering 142.250.194.206 in your browser.

So let's have a quick recap, in this thread you learned about:
☑️ What is internet protocol suite?
☑️ How does internet protocol suite work?
☑️ What are packets?
☑️ What is http/https?
☑️ What is url?
☑️ How does internet works under the hood?

Thanks for reading it so far!

I hope you've found this thread helpful, please do follow @vedantnn7 for more concise threads like these to become a better web developer.

Leaving a like and retweet really means a lot to me 🙌 

You can read the unrolled version of this thread here: https://typefully.com/vedantnn7/ktv9cyv

How does internet work under the hood?

Quick HTTP status codes cheatsheet, along with examples

{ A mega thread 🤘 }

#100daysofcode #webdevelopment

This thread serves as an crash course to HTTP status codes. I'll share you everything you need to know about almost every status code you'll ever encounter on the internet.

⭐ So first of all, what are HTTP status codes?
• HTTP status codes indicate whether a specified request to server is successful or not.
• HTTP status codes are also known as "responses", in short.

⭐ Responses are basically grouped into 5 classes:
✅ 1xx - Information responses
✅ 2xx - Successful response
✅ 3xx - Redirection message
✅ 4xx - Client errors
✅ 5xx - Server errors

↓ Simplest explanation, lol

⭐ Major 1xx status codes
✅ 100 - Continue
✅ 101 - Switching protocols
✅ 102 - Processing
✅ 103 - Early hints
✅ 122 - Request - URI too long

⭐ Major 2xx status codes
✅ 200 - Ok, successful
✅ 201 - Successful but created something
✅ 202 - Accepted, but not processed
✅ 203 - Non-authoritative information
✅ 206 - Partial content

✅ 204 - No content
✅ 205 - Reset content
✅ 207 - Multi-status
✅ 208 - Already reported
✅ 226 - IM Used


⭐ Major 3xx responses
✅ 300 - Multiple choices
✅ 301 - Moved permanently
✅ 302 - Found
✅ 303 - See other
✅ 304 - Not modified
✅ 305 - Use proxy
✅ 306 - Unused
✅ 307 - Temporary redirect
✅ 308 - Permanent redirect

⭐ Major 4xx responses
✅ 400 - Bad request
✅ 401 - Unauthorized
✅ 402 - Payment required
✅ 403 - Forbidden
✅ 404 - Not found
✅ 405 - Method not allowed
✅ 406 - Not acceptable
✅ 407 - Proxy authentication required
✅ 408 - Request timeout
✅ 409 - Conflict
✅ 410 - Gone

✅ 411 - Length required
✅ 412 - Precondition failed
✅ 413 - Payload too large
✅ 414 - URI too long
✅ 415 - Unsupported media type
✅ 416 - Range not satifiable
✅ 422 - Unprocessable entity

✅ 423 - Locked
✅ 421 - Misdirected request
✅ 424 - Failed dependency
✅ 425 - Too early
✅ 426 - Upgrade required
✅ 429 - Too many requests

⭐ Major 5xx responses
✅ 500 - Internal server error
✅ 501 - Not implemented
✅ 502 - Bad gateway
✅ 503 - Service unavailable
✅ 504 - Gateway timeout
✅ 507 - Insufficient storage
✅ 508 - Loop detected
✅ 510 - Not extended
✅ 511 - Network authentication required

That's it for this thread and I hope you've found it helpful!

I help you become a better web developer by sharing helpful resources and demystifying complex topics. If this is something that interests you, make sure to follow @vedantnn7.

Thanks for checking this out!

You can read the unrolled version of this thread here: https://typefully.com/vedantnn7/gbRfA7b

HTTP status code cheat sheet

Writing clean and quality code is very crucial in software development.

Here are 7+ tips and best practices to write clean code in javascript, with examples.
 
A thread 🧵↓

#100DaysOfCode #100DaysOfJavascript

In this thread I will share 7+ tips and best practices that will help you write more clean and better javascript code.

Why to write clean code?
✔️ Improved maintainability of code
✔️ Improved code quality
✔️ Increased developer productivity

⚡ Let's dive in!

⭐ Use object destructuring
• It allows to extract values from arrays and objects into distinct variables.

• Why?
✔️ Reduce no. of lines of code.

• When is it useful?
✔️ When using multiple properties from an object.
✔️ Using a deeply nested property in object.

• Example:

⭐ Use guard clauses
• Guard clauses are a great way to prevent nested if..else by using the "return early" approach.

• Why?
✔️ More cleaner code
✔️ Reduced lines of code

• When is it useful?
✔️ When using nested if..else statements

• Example:

⭐ Use meaningful & pronounceable names for variables
1. Use plurals arrays
2. Use is for booleans
3. Use verbs for function names
4. Use meaningful names for callback variables

• Why?
✔️ More readable code
✔️ Improved productivity as a developer

• Example:

⭐ Use template literals for string concatenation
• Template literals are just string enclosed with backticks (`), providing an easy way to create multiline strings and perform string interpolation.

• Why?
✔️ More cleaner code
✔️ Improved productivity as a dev

• Example:

⭐ Keep function simple
• Using the KISS approach is a better way while writing code, for eg writing complex functions can lead to sphagetti code.
• A function shouldn't do more than one thing.

• Why?
✔️ Better code quality
✔️ Increased productivity as a dev

• Example:

⭐ Use default arguments instead of conditionals
• Default args are cleaner than conditionals.
• Beware that if you use them, your function will only provide default values for undefined arguments, NOT for falsy ones.

• Why?
✔️ Cleaner code
✔️ Better code quality

• Example:

⭐ Don't add unneeded context
• If you class or object is self explanatory and tells you something, then you don't need to repeat in its method or variable name.

• Why?
✔️ Better code quality
✔️ More readable and clean code

• Example:

That's it for this thread, I hope you've found it helpful!

Follow me (@vedantnn7) for more helpful tweets & threads like this to become a better web developer. 

Also don't forget to like, retweet & share this thread. This really means a lot to me!

Thanks for checking this out!

You can read the unrolled version of this thread here: https://typefully.com/vedantnn7/Cj8TGRq

7+ tips and best practices for writing clean code in javascript!

7+ Tips to write cleaner javascript code 💻 

{ A mega thread! 🧵 }

#100DaysOfCode #100DaysOfJavascript

You can read the unrolled version of this thread here: https://typefully.com/vedantnn7/l5HUfqE