DEV Community: Ashvin Kumar Suthar

🎉 Introducing Stickies: Your Ultimate Sticky Notes App for macOS 🌟

Ashvin Kumar Suthar — Tue, 28 Jan 2025 12:21:52 +0000

👋 I'm thrilled to share Stickies - Sticky Notes App, an app I built to make your note-taking simple, colorful, and efficient! Whether you're brainstorming ideas, jotting down tasks, or organizing your thoughts, Stickies has got you covered.

🌈 Key Features

Forget messy notes and scattered thoughts! Stickies keeps your life organized with:

Easy writing made even easier: Type & edit notes instantly with a handy toolbar that puts formatting power at your fingertips.
Markdown magic: Add code highlights, lists, and fancy formatting with simple symbols.
Color your world: Choose from tons of colors to make your notes pop.
Organize on the fly: Collapse notes, rearrange them, or search them in a flash.
Keyboard whiz: Master shortcuts to zoom through your notes like a pro.
Night owl mode: Switch to dark theme for late-night brainstorming.
Picture perfect: Add images to bring your notes to life.
Share and store: Seamlessly export notes or keep them safe across devices with effortless importing.

Plus, so much more! Stickies is your all-in-one note-taking powerhouse, ready to conquer your to-dos, ideas, and everything in between.

Note: Stickies does not currently support reminders—it’s built for quick and effective note-taking.

🚀 Why I Built Stickies

The native macOS Stickies app misses many features I wanted, such as advanced formatting tools and better customization. Other sticky note apps often lack powerful toolbars and formatting options, making the overall experience frustrating. Stickies was my way of filling these gaps—a tool that strikes the perfect balance between power and simplicity.

🔄 Lessons Learned

Focus on User Feedback: Regularly listening to users allowed me to refine the app and deliver a better experience.
Start Small, Improve Gradually: Launching an MVP helped me validate the idea before adding more features.
Never Underestimate Design: Small design tweaks can significantly elevate the user experience.

📲 Download Stickies Today!

Ready to streamline your notes? Stickies is available now on the Mac App Store. Download it and let Stickies make your note-taking colorful, fun, and productive!

🔐 Share Your Thoughts!

I’d love to hear your feedback! How do you use Stickies? What features would you like to see next? Let’s connect in the comments below or on Twitter. Together, we can make Stickies even better!

Thanks for reading, and happy note-taking! ✍️✨

Github like Calendar Heatmap built from Scratch using React - JSitor

Ashvin Kumar Suthar — Wed, 06 Jan 2021 13:49:01 +0000

Today, I have challenged myself to pick a random UI and built it from scratch. I picked up the Github Contribution heatmap view and built it using React and SCSS.

It took me ~1hour to complete this. A full video in making is available here -

Interactive Menu Bar using JavaScript, SVG & CSS- JSitor

Ashvin Kumar Suthar — Mon, 04 Jan 2021 13:00:40 +0000

An interactive menu-bar using SVG and CSS animations.

Credits - https://www.youtube.com/c/OnlineTutorials4Designers/featured

Code - https://jsitor.com/cNiYPzdoz

Calendar Heatmap using React on JSitor

Ashvin Kumar Suthar — Wed, 30 Dec 2020 04:10:07 +0000

A calendar heatmap coded using react-day-picker

Twitter
@ashvin_777
@JSitorEditor

JSitor Mobile App (Programming in Phone) - Big Update Coming Soon 🔥🔥

Ashvin Kumar Suthar — Wed, 16 Dec 2020 02:34:32 +0000

JSitor.com is an online snippet development tool just like JSFiddle, Codepen or JSBin.

It also has a mobile app which can be used to write, test, view or share the snippets. This post is mainly about giving some insights via some screenshots about what is coming next.

JavaScript Editor look

Snippets list (WIP)

HTML Editor look

Editor Settings

Live Preview

Fullscreen Mode

Stay tuned to our twitter https://twitter.com/jsitoreditor for more updates.

🎉🎉 Private Variables & Methods in JavaScript

Ashvin Kumar Suthar — Tue, 29 Sep 2020 08:53:57 +0000

Recently, a new proposal was introduced that would introduce private variables and methods to classes. Currently, it is at stage-3.

Its very simple, just put # before the name of variables or method, and it becomes private.

class Person {
  #salary = 100;

  #increaseSalary() {
    this.#salary += 1000;
  }
}

let p1 = new Person();

console.log(p1.#salary); //Error - Private name #salary is not defined
console.log(p1.#increaseSalary); //Error - Private name #increaseSalary is not defined

👉 Live Demo/Playground

👉 Babel supports this feature in 7.2+ versions out of box.

👉 You can also enable this feature by just installing these babel plugins -
babel-plugin-proposal-private-methods
babel-plugin-proposal-class-properties

👨🏻‍💻 Icons created with CSS - Series 1

Ashvin Kumar Suthar — Thu, 14 Nov 2019 19:29:02 +0000

ReactJS Icon

VueJS Icon

Heart Shape

Google Analytics Icon

Bell Icon

🎉🎉 JSitor- Introducing new Editor Layouts

Ashvin Kumar Suthar — Mon, 11 Nov 2019 17:37:02 +0000

JSitor is a place to experiment, debug, and show off your HTML, CSS, and JavaScript creations.

Know more about JSitor -

JSitor, an alternative of CodePen, JSBin and JSFiddle

Ashvin Kumar Suthar ・ Sep 12 '19 ・ 3 min read

#javascript #css #html #react

JSitor Mobile App, an alternative of JSFiddle, CodePen and JSBin

Ashvin Kumar Suthar ・ Sep 20 '19 ・ 2 min read

#javascript #html #css #webdev

Try Optional Chaining and Nullish Coalescing on JSitor, its live

Ashvin Kumar Suthar — Sat, 21 Sep 2019 08:45:26 +0000

JSitor, now supports

Optional Chaining - Example - https://jsitor.com/bIhQS-b4Y
Nullish Coalescing - Example - https://jsitor.com/QIPOSicZu

Using the power of Babel plugins
https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining
https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator.

How to use

Just set "JavaScript Babel and JSX" mode in settings for JavaScript view and its ready for you. Here is the screenshot to find it

Optional Chaining

The optional chaining operator ?. permits reading the value of a property located deep within a chain of connected objects without having to expressly validate that each reference in the chain is valid. The ?. operator functions similarly to the . chaining operator, except that instead of causing an error if a reference is null or undefined, the expression short-circuits with a return value of undefined. When used with function calls, it returns undefined if the given function does not exist.

Try example - https://jsitor.com/bIhQS-b4Y

Nullish Coalescing

The nullish coalescing proposal (??) adds a new short-circuiting operator meant to handle default values.

You might already be familiar with the other short-circuiting operators && and ||. Both of these operators handle “truthy” and “falsy” values. Imagine the code sample lhs && rhs. If lhs (read, left-hand side) is falsy, the expression evaluates to lhs. Otherwise, it evaluates to rhs (read, right-hand side). The opposite is true for the code sample lhs || rhs. If lhs is truthy, the expression evaluates to lhs. Otherwise, it evaluates to rhs.

Try example - https://jsitor.com/QIPOSicZu

Give a try and share your feedback. We would love to hear from you guys.

Ashvin Suthar (Creator of JSitor.com)
Follow us on Twitter - https://twitter.com/JSitorEditor

JSitor Mobile App, an alternative of JSFiddle, CodePen and JSBin

Ashvin Kumar Suthar — Fri, 20 Sep 2019 19:07:02 +0000

JSitor is a web tool which is used to write web snippets, along with the web version, it also supports mobile app-based editors which can be very helpful to test out our ideas whenever we are away from our laptop.

Both Android and iOS apps are built with the power of ReactNative and CodeMirror.

Download iOS App
Download Android App

What is different about JSitor app?

Supports TypeScript, JSX, Babel, Script Modules
Supports Pug document formatting
Supports Less, SCSS, PostCSS
Awesome interface an easy to use
In sync with the web version JSitor.com, so you can finish your unfinished work anywhere
Rich syntax highlights and suggestions
Quick keys over the keyboard
Easy to install external CDN libraries
Log in with Github to manage snippets
View Trending/Most viewed and Most recent snippets

Few screenshots

Know more about JSitor

JSitor, an alternative of CodePen, JSBin and JSFiddle

Ashvin Kumar Suthar ・ Sep 12 '19

#javascript #css #html #react

I won't say that JSitor will be the best tool but definitely it is worth to explore. Give a try and share your feedback. We would love to hear from you guys.

Ashvin Suthar (Creator of JSitor.com)
Follow us on Twitter - https://twitter.com/JSitorEditor

Who says Programming in Mobile is tough?

Ashvin Kumar Suthar — Mon, 16 Sep 2019 19:48:11 +0000

JSitor is a web tool which is used to write Web and NodeJS snippets, along with the web version, it also supports mobile app-based editors which can be very helpful to test out our ideas whenever we are away from our laptop.

Both Android and iOS apps are built with the power of ReactNative and CodeMirror.

Download iOS App
Download Android App

What is different about JSitor app?

Supports TypeScript, JSX, Babel, Script Modules
Supports Pug document formatting
Supports Less, SCSS, PostCSS
Awesome interface an easy to use
In sync with the web version JSitor.com, so you can finish your unfinished work anywhere
Rich syntax highlights and suggestions
Quick keys over the keyboard
Easy to install external CDN libraries
Log in with Github to manage snippets
View Trending/Most viewed and Most recent snippets

Few screenshots

Know more about JSitor

JSitor, an alternative of CodePen, JSBin and JSFiddle

Ashvin Kumar Suthar ・ Sep 12 '19 ・ 3 min read

#javascript #css #html #react

I won't say that JSitor will be the best tool but definitely it is worth to explore. Give a try and share your feedback. We would love to hear from you guys.

Ashvin Suthar (Creator of JSitor.com)
Follow us on Twitter - https://twitter.com/JSitorEditor

JSitor, an alternative of CodePen, JSBin and JSFiddle

Ashvin Kumar Suthar — Thu, 12 Sep 2019 07:14:29 +0000

JSitor is an online free tool for writing, executing and sharing web and NodeJS snippets. It is a non-profitable product without any ads which gives more editor window to write code.

Key Features

NodeJS and Interactive Shell Terminal

JSitor facilitates the NodeJS environment for writing/sharing NodeJS scripts and installs NPM modules. Also its free.

Monaco Editor

JSitor uses Monaco Editor which is developed by Microsoft and also used in VSCode. If we compare this with other alternatives, they are using CodeMirror and CodeMirror has its own stability and usability issues. Monaco editor is more satisfactory and stable editor compared to that.

Take a look at, how beautiful autocomplete looks like in Monaco Editor, isn't it better?

Comparing with CodeMirror autocomplete

Console View

JSitor shows the console logs in the editor itself without having a need of opening the DevTools. This is sometimes very helpful when we want to quickly check the logs without opening the DevTools which takes half of the editor space.

Fullscreen tab view

JSitor gives you a full-screen tab view which gives enough space for writing/viewing huge source codes. Apart from that, it also provides basic views such as side by side view, result in the bottom etc.

Collaboration

JSitor supports collaboration working environment with the help of TogetherJS. This feature is generally really helpful for taking remote interviews or to invite others to work on the same snippet.

Babel, JSX, Script Module and TypeScript

JSitor supports all different type of transpiler, which help us to write code for any framework such as ReactJS, Angular etc

PostCSS, Less, SCSS

JSitor supports all different CSS preprocessors

Pug

JSitor supports Pug HTML formatting as well

Optional Chaining

Nullish Coalescing

All snippets

You can view all your snippets

Trending, Most View and Recent Snippets

You can view some trending, most viewed and recent snippets as well under Trending tab

Embeddable

You can embed the snippets on another blog/articles sites

iOS and Android Apps

JSitor also gives you the benefit of writing/sharing or viewing the code in Mobile app. This is really helpful when we are away from our computer and want to quickly test out something.

Download iOS Application
[Download Android Application (https://play.google.com/store/apps/details?id=com.ashvin777.apps.jsitor) The Android is not yet upgraded, I am working on upgrading the Android app well, you will soon hear some news.

Know more about Mobile app

Who says Programming in Mobile is tough?

Ashvin Kumar Suthar ・ Sep 16 '19

#javascript #css #html #react

I won't say that JSitor will be the best tool but definitely it is worth to explore. Give a try and share your feedback. We would love to hear from you guys.

Ashvin Suthar (Creator of JSitor.com)