DEV Community: Edison Augusthy

🚀⚙️18 developer tools every developer should use in 2026

Edison Augusthy — Thu, 28 May 2026 15:09:16 +0000

Every few months I find some tool that makes one small part of development less painful.

Sometimes it is for debugging performance. Sometimes it is for responsive testing. Sometimes it is just a better way to draw a quick diagram or test an API before the backend is ready.

So this post is a combination of tools and resources I use, or keep close, to improve my development workflow. Not every tool here is something everyone needs. But each one solves a real problem that comes up when building, testing, explaining, or maintaining software.

If you already use any of these, feel free to share your view too. It is always helpful to know how other developers are using the same tools in their day-to-day work.

1. Angular Render Scan

Angular Render Scan helps debug Angular change detection and component renders visually.

If you work with Angular, you know this pain. A page feels slow, but from the code it is not always clear which component is rendering too much. Instead of guessing, this tool helps you see render activity directly.

I like this kind of tool because it makes performance debugging less abstract. You can look at the UI and quickly understand where to focus.

I would use it for:

finding components that render too often
debugging change detection issues
checking slow Angular screens
improving performance without random code changes

2. Multi Device Viewer

Multi Device Viewer is a Chrome extension for checking responsive layouts across multiple devices at the same time.

This is one of those problems I kept facing while building projects. I would test one mobile size, then tablet, then desktop, then again come back to mobile because one small CSS change broke something else.

With this extension, I can preview multiple screen sizes side by side. It also supports device frames, orientation switching, screenshots, and annotations, which helps when I need to explain a layout issue clearly.

I would use it for:

checking mobile, tablet, laptop, desktop, and custom sizes
comparing breakpoints side by side
capturing screenshots for feedback
spotting responsive issues without resizing the browser again and again

3. React Scan

React Scan is useful for finding performance issues in React apps.

React performance debugging can get confusing when the app grows. Sometimes the issue is not one big mistake, but many small unnecessary renders. React Scan makes that easier to notice by highlighting components that need attention.

It is a nice tool to keep around when a React screen feels slower than expected and you want a quick visual clue.

I would use it for:

detecting unnecessary renders
finding components that need optimization
debugging React performance visually
checking whether a change improved or worsened rendering

4. ToDiagram

ToDiagram is useful when data is technically readable, but still hard to understand.

JSON, YAML, XML, CSV, and Mermaid can all become messy when the structure gets bigger. Seeing that data as a diagram makes it much easier to understand relationships and nested structures.

This is helpful when I am looking at API responses, config files, schemas, or any data shape that needs a visual map.

I would use it for:

visualizing JSON or YAML
understanding nested data
explaining payloads to someone else
turning structured data into diagrams quickly

5. diagrams.net

diagrams.net, also known as draw.io, is one of the tools I keep coming back to.

It is not fancy in a distracting way. It just does the job. You can create flowcharts, architecture diagrams, UML diagrams, ER diagrams, network diagrams, and database schemas without needing a heavy setup.

When I need a clean diagram for a document or discussion, this is usually enough.

I would use it for:

architecture diagrams
database schema diagrams
flowcharts
explaining systems visually

6. Excalidraw

Excalidraw is great when the diagram does not need to look too formal.

I use this kind of tool when I want to explain an idea quickly. The hand-drawn style makes it feel less like a final document and more like a working thought.

It is perfect for rough architecture, UI flows, planning notes, and quick discussions.

I would use it for:

sketching ideas
drawing rough system flows
making casual architecture notes
explaining something without over-polishing it

7. Jam

Jam makes bug reporting much easier.

Instead of sending a message like "this page is broken", you can record the issue and share useful debugging context with it. It can capture things like browser details, console logs, network logs, and reproduction steps.

This reduces a lot of back and forth between developers, QA, and product people.

I would use it for:

reporting bugs with proper context
capturing console and network logs
sharing reproduction steps
making debugging faster for the person fixing the issue

8. Beeceptor

Beeceptor is useful when you need a mock API quickly.

There are many times when frontend work is ready, but the backend is not. Or maybe you want to test how your app behaves when an API is slow, fails, or returns a different response.

Mock endpoints make that work much easier. Beeceptor also helps with webhook testing and request inspection, which is very useful during integrations.

I would use it for:

creating mock REST or GraphQL APIs
testing webhooks
simulating API delays and failures
continuing frontend work without waiting for backend changes

9. AFFiNE

AFFiNE is an open-source workspace that combines docs, whiteboards, and databases.

I like tools that let me write and draw in the same place. Some ideas start as text, but later need a whiteboard. Some planning starts visually, then becomes notes or tasks.

AFFiNE fits that kind of mixed workflow well.

I would use it for:

project notes
whiteboards
planning tasks
keeping a personal or team knowledge base

10. fish shell

fish is a command line shell with good defaults.

If you spend a lot of time in the terminal, small improvements matter. Autosuggestions, tab completions, syntax highlighting, and cleaner scripting can save a surprising amount of time.

It is not a tool that changes your whole workflow overnight, but it makes daily terminal work smoother.

I would use it for:

better command suggestions
faster terminal navigation
cleaner shell scripting
improving the daily command line experience

11. Free Public APIs

Free Public APIs is a directory of public APIs.

This is useful when you want to build a demo, practice API integration, or test a frontend idea without creating your own backend first.

Many side projects slow down because we spend too much time thinking about data. A public API directory helps you start faster.

I would use it for:

finding APIs for side projects
practicing API integration
building frontend demos
exploring public data sources

12. Polypane

Polypane is a browser built for web development and responsive testing.

It helps you view different screen sizes at the same time and check things like responsiveness, accessibility, and site quality. For frontend work, that saves time because you do not have to keep jumping between device sizes manually.

This is useful when you want a more focused testing setup than normal browser resizing.

I would use it for:

testing multiple screen sizes
checking responsive layouts
reviewing accessibility issues
debugging frontend pages in a dedicated browser

13. Skills

Skills is a directory for reusable capabilities for AI agents.

If you use coding agents, you probably know that instructions matter a lot. A good workflow can make the agent more useful, but writing the same instructions again and again is boring.

Skills are interesting because they package that kind of procedural knowledge so it can be reused.

I would use it for:

discovering agent skills
improving coding-agent workflows
reusing common instructions
making repeated AI workflows more consistent

14. AI Directories

This GitHub repo is a curated list of AI directories where people can submit AI tools.

Building a product is one thing. Getting people to find it is another. If you are building an AI-related tool, directories can help with early discovery and launch distribution.

This is a useful repo to keep bookmarked if you are planning to launch or promote an AI product.

I would use it for:

finding AI directories
submitting an AI product
planning launch distribution
researching where similar tools are listed

15. Patterns.dev

Patterns.dev is a learning resource for design, rendering, and performance patterns in web apps.

This is not something I open for a quick one-minute task. It is more of a resource I would read when I want to understand frontend architecture better.

Good tools improve your workflow, but good resources improve how you think. Patterns.dev fits into that second category.

I would use it for:

learning JavaScript patterns
understanding rendering patterns
improving frontend architecture
studying performance techniques

16. An Introduction to Domain-Driven Design

This is a good introduction to Domain-Driven Design.

DDD can sound heavy at first, but the basic idea is practical: understand the business domain and make the code reflect that domain clearly.

This becomes more useful when an app grows beyond simple CRUD and the business logic starts spreading everywhere.

I would use it for:

understanding DDD basics
organizing business logic better
learning about entities, value objects, aggregates, and domain events
thinking beyond simple controller-service-database code

17. Software Engineering at Google

Software Engineering at Google is a free online book about building and maintaining software over time.

The part I like is how it separates programming from software engineering. Writing code is one part. Keeping that code useful, maintainable, and adaptable for years is the bigger challenge.

This is a good resource when you want to think more seriously about engineering practices, trade-offs, and long-term maintenance.

I would use it for:

learning about software engineering at scale
understanding maintainable codebases
thinking about trade-offs and cost
improving engineering habits

18. LLMTEXT.com

LLMTEXT.com is useful if you work with llms.txt and MCP servers.

The install page helps turn any llms.txt URL into a dedicated MCP server. That means an AI tool can use documentation in a more structured way instead of you copying and pasting the same docs again and again.

This becomes more useful when you use AI coding assistants regularly, because better context usually means better output.

I would use it for:

installing llms.txt MCP servers
connecting documentation to AI tools
avoiding repeated doc copy-paste
improving context for Claude, Cursor, or other LLM workflows

Final thoughts

These are not the only developer tools out there, and I am not saying everyone should use all of them.

For me, the best tools are the ones that remove repeated friction. If a tool saves me from resizing the browser ten times, guessing which component is slow, drawing the same diagram from scratch, or waiting for an API before I can continue, then it is worth keeping in my workflow.

That is why I like collecting tools like this. Small improvements add up over time.

If you use any of these tools, or if you know a better alternative, share it in the comments. It will help others understand how these tools are actually improving real development workflows.

Sell your skills

Edison Augusthy — Mon, 21 Jun 2021 04:51:05 +0000

one of the main goals in my life is to retire early and enjoy rest by traveling all over the world. I know all of you also have some goals like this. but we know it's hard to save enough money for your retirement life. here am sharing some of my side income techniques, which you can adapt and achieve your financial goals

1) share market

above image just shows the growth of tesla on last few years. If you have invested 1000 dollars on Tesla shares in January 2020 that would be 8800 dollars by January 2021, that means 800% increment in your amount. This itself simply explain the power of share market. I usually make around 60 USD a week, which is much more than enough to cover my family's medical bills. so if you have 1 hour to spend daily, you can easily make more profit from the share market. most people say it is hard to learn share market concepts but I say actually it's not. it's super easy to learn the foundations which is much more than enough to be an investor. first start with some tutorials on youtube, then find some good shares, start investing

2) Sell your skills on amazon

In my home, everyone is super talented except me. my mom makes really good chips, and my sister is good at making crafts from wastes and empty bottles. actually, I was looking for a place to sell their skills, and I landed on amazon. we started an amazon seller account last year and started selling chips and crafts, surprisingly we got good reviews from customers and we are now able to make around 90 USD per month. this was a simple idea that came to my mind on the country-wide lock down in India started on 2020 March, I never thought it would be a success, but it is.

you can sell almost anything on amazon or any other online store. if your son is good at painting then start selling his painting, if you are good at farming just start selling some of your agricultural yields. if you are good at gardening even you can sell some plant seeds too.

its just find out what skills you can sell.. sell it .. and save for future

3) A simple app can give you 100 Dollars each month

last year I was planing to make some apps for learning new the technologies. I don't want to make something just show on my Github, but I wanted one app that can pay me in the future. at last, I came to an idea to make a app that can help people to crack professional exams. I just created a simple app and Deployed it on the play store. surprisingly people started using it, so I just kept updated with new content. later last month I was able to make 100 dollars from my app.

"the best time to start was yesterday. the next best time is Now"

Just remember there are plenty of ways that you can achieve your financial goals. all you have to do is just find out one and start doing it. the best time to start was yesterday. the next best time is Now so start now.

✨♻️One line - Date Operations in JavaScript

Edison Augusthy — Mon, 14 Sep 2020 04:32:56 +0000

See some of the useful single line JavaScript snippets for dealing with dates

Cheking

Is Before

Check if a date is before another date.

// 2020/10/20 is before 2020/10/21
new Date('2020/10/20') < new Date('2020/10/21');
// => true

Is Same

Check if a date is the same as another date.

// '2020-10-20' is same of '2020-10-21'

new Date(2020, 9, 20).valueOf() === new Date(2020, 9, 21).valueOf();
// => false
new Date(2020, 9, 20).valueOf() === new Date(2020, 9, 20).valueOf();
// => true
new Date(2020, 9, 20).getTime() === new Date(2020, 9, 20).getTime();
// => true
new Date(2020, 9, 20).valueOf() === new Date(2020, 9, 20).getTime();
// => true
new Date(2020, 9, 20).toDateString().substring(4, 7) ===
  new Date(2020, 9, 21).toDateString().substring(4, 7);
// => true

Is After

Check if a date is after another date

new Date(2020, 9, 20) > new Date(2020, 9, 19);
// => true

Is Leap Year

Check if a year is a leap year

new Date(2000, 1, 29).getDate() === 29;
// => true

Is a Date

Check if a variable is a native js Date object.


new Date() instanceof Date;
// => true

Get Or Set

Get the Millisecond/Second/Minute/Hour of the given date

new Date().getSeconds();
// => 49
new Date().getHours();
// => 19

Set the Millisecond/Second/Minute/Hour of the given date.

new Date(new Date().setSeconds(30));
// => "2020-09-09T09:12:30.695Z"
new Date(new Date().setHours(13));
// => "2020-09-09T03:12:49.695Z"

Date of Month

Gets the day of the month.


new Date().getDate();
// => 9

Sets the day of the month

new Date().setDate(4);
// => "2020-09-04T09:12:49.695Z"

Day of Week

Gets the day of the week.


new Date().getDay();
// => 0 (Sunday)

Sets the day of the week


new Date().setDate(new Date().getDate() - 14);
// => "2020-08-26T09:12:49.695Z"

Day of Year

Gets or sets the day of the year.


Math.floor(
  (new Date() - new Date(new Date().getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24
);
// => 252

Week of Year

Gets the week of the year

const day = new Date();
const MILLISECONDS_IN_WEEK = 604800000;
const firstDayOfWeek = 1; // monday as the first day (0 = sunday)
const startOfYear = new Date(day.getFullYear(), 0, 1);
startOfYear.setDate(
  startOfYear.getDate() + (firstDayOfWeek - (startOfYear.getDay() % 7))
);
const dayWeek = Math.round((day - startOfYear) / MILLISECONDS_IN_WEEK) + 1;
// => 37

Sets the week of the year


const day = new Date();
const week = 24;
const MILLISECONDS_IN_WEEK = 604800000;
const firstDayOfWeek = 1; // monday as the first day (0 = sunday)
const startOfYear = new Date(day.getFullYear(), 0, 1);
startOfYear.setDate(
  startOfYear.getDate() + (firstDayOfWeek - (startOfYear.getDay() % 7))
);
const dayWeek = Math.round((day - startOfYear) / MILLISECONDS_IN_WEEK) + 1;
day.setDate(day.getDate() - (dayWeek - week) * 7);
day.toISOString();
// => "2020-06-10T09:12:49.794Z

Days in Month

Get the number of days in the current month

new Date(2012, 02, 0).getDate();
// => 29

Parse

Return the Date parsed from date string using the given format string

const datePattern = /^(\d{2})-(\d{2})-(\d{4})$/;
const [, month, day, year] = datePattern.exec('12-25-1995');
new Date(`${month}, ${day} ${year}`);
// => "1995-12-24T13:00:00.000Z"

Return the Date parsed from time string using the given format string

const datePattern = /^(\d{4})-(\d{2})-(\d{2})\s(\d{1,2}):(\d{2})$/;
const [, year, month, day, rawHour, min] = datePattern.exec('2010-10-20 4:30');
new Date(`${year}-${month}-${day}T${('0' + rawHour).slice(-2)}:${min}:00`);
// => "2010-10-19T17:30:00.000Z"

Manipulate

Add

Add the specified number of days to the given date.

// add 7 days
const now = new Date();
now.setDate(now.getDate() + 7);
// => "Sun Sep 16 2018 09:12:49"

Subtract

Subtract the specified number of days from the given date.

// subsctact 7 days
new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 7);
// => Sun Sep 09 2018 09:12:49

End of Time

Return the end of a unit of time for the given date.

const end = new Date();
end.setHours(23, 59, 59, 999);
end.toISOString();
// => "2018-09-09T16:59:59.999Z"

Display

Time from now

Return time from now.


new Intl.RelativeTimeFormat().format(-4, 'day');
// => "4 days ago"

Difference

Get the unit of time between the given dates


// difference betwwen '2007-01-27' to '2007-01-29'
new Date(2007, 0, 27) - new Date(2007, 0, 29);
// => -172800000
Math.ceil(
  (new Date(2007, 0, 27) - new Date(2007, 0, 29)) / 1000 / 60 / 60 / 24
);
// => -2

🚀⚙️Deep Dive in to JavaScript Engine - (Chrome V8)

Edison Augusthy — Mon, 07 Sep 2020 02:42:34 +0000

The web browser are the main part of internet world. When ever we type a URL in the address bar, it fetch resources from remote server, and display them on the screen, through this time it mainly undergoes 3 process

Fetch
Process
Display

At first it fetching data from subsequent web servers via the internet.

Then the Render engine, will process the received resourses. After that the Browser Engine will performs data presentation.

so how all this happen...?

To know better about these processes, we should know how a browser process JavaScript . And that is done by JavaScript engines.

A JavaScript engine is a program or an interpreter which executes JavaScript code. JS is a higher level dynamic language and it has no way to directly interact with our machines lower level logic. So JavaScript engine can be implemented as a standard interpreter, or just-in-time compiler that compiles JavaScript to bytecode in some form . see the high level overview of the js engine in below image

Parser The Html Parser will fetch all scripts loaded via <script> tag. The source code inside this script gets loaded as a UTF-16 byte stream to a byte stream decoder. This byte stream decoder then decodes the bytes into token and then its sent to parser.
AST(Abstract Syntax Tree)
The parser creates nodes based on the tokens it gets. With these nodes, it creates an Abstract Syntax Tree (AST).
Interpreter
The interpreter walks through the AST and generates byte code. It reads the code line by line. When the byte code has been generated, the AST is deleted for clearing up memory space.
Profiler
The Profiler monitors and watches code to optimize it.
Compiler
The compiler works ahead of time and creates a translation of the code that has been written and compiles down to a lower level language that machines can read.

We have seen different components of js engine . Now lets check what are the Different JavaScript engines available..

V8 — open source, developed by Google, written in C++
Rhino — managed by the Mozilla Foundation, open source, developed entirely in Java
Spider Monkey — the first JavaScript engine, which back in the days powered Netscape Navigator, and today powers Firefox
JavaScriptCore — open source, marketed as Nitro and developed by Apple for Safari
KJS — KDE’s engine originally developed by Harri Porten for the KDE project’s Konqueror web browser
Chakra (JScript9) — Internet Explorer
Chakra Core(JavaScript) — Microsoft Edge (Now uses v8)
Nashorn, open source as part of OpenJDK, written by Oracle Java Languages and Tool Group
JerryScript — is a lightweight engine for the Internet of Things.

V8

The V8 Engine which is built by Google is open source and written in C++. This engine is used inside Google Chrome. V8 is also used for the popular Node.js And Deno. To obtain High performance, V8 translates JavaScript code into more efficient machine code instead of using an interpreter. Even though Most modern JavaScript engines has the same approach, but V8 stand out is that it does not produce any intermediate code.

HOW V8 WORKS

V8 compiles JavaScript code into machine code at execution by implementing a JIT (Just-In-Time) compiler. A JIT compiler takes the benefits from both the traditional compiler and an interpreter and mixes them together.

When V8 compiles JavaScript code, the parser generates an AST (abstract syntax tree). A syntax tree is a tree representation of the syntactic structure of the JavaScript code. Ignition, the interpreter, generates bytecode from this syntax tree. TurboFan, the optimizing compiler, eventually takes the bytecode and generates optimized machine code from it.

Lets check v8's 2 main pipelines behind its performance Ignition interpreter and the compiler Turbofan little bit more

Ignition

The interpreter in v8 is called Ignition. The interpreter generates the byte-code. This is good for code that only needed to run only once. The byte-code runs inside the JavaScript engine itself. Interpreted code is falser to get something running but is a bit slower. Ignition resolve overhead memory consumption by achieving three objectives

reducing memory usage
reducing startup time
reducing complexity

TurboFan

The TurboFan pipeline follows some steps to translate bytecode into machine code. Optimizations in the pipeline are performed based on feedback collected by Ignition.

TurboFan’s online, JIT-style compilations and optimizations concludes V8’s translation from source code to machine code.

Sometimes, we may have repeated code blocks. The JavaScript compilers run feedback and collect profiling data for the code being executed. If it comes across the function that is being called with the same type of parameters every time and has been called multiple times, this code goes through TurboFan. The TurboFan produces highly optimized machine-level code which runs directly on the CPU for the hot code. TurboFan only kicks in when JS engine detects a code to be hot. A code is hot when it runs quite often, runs inside a loop, etc. The compiled code has direct CPU instructions and is quite faster.

🌳Say goodbye to LocalStorage 🚀

Edison Augusthy — Tue, 01 Sep 2020 10:48:54 +0000

Being a front-end developer one of the common things that we wanted is to store and share data in the client browser, And most of us really rely on local storage. So what is localStorage..?
according to MDN:

The localStorage provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies. data stored in localStorage has no expiration time. Data in a localStorage object created in a "private browsing" or "incognito" session is cleared when the last "private" tab is closed.

So the data stored in localStorage is specific to the protocol of the page. In particular, data stored by a script on a site accessed with HTTP (e.g., http://example.com) is put in a different localStorage object from the same site accessed with HTTPS (e.g., https://example.com).

The keys and the values are always in the UTF-16 DOMString format, which uses two bytes per character. As with objects, integer keys are automatically converted to strings.

So what are `localStorage` disadvantages..?

data stored in localStorage has no expiration time
localStorage will be available for any tab or window in the browser,
Have to constantly keep back up of data to prevent loss
The user is completely responsible for the safety of the data
Takes up more storage space if you store locally

Switching to session storage

Window.sessionStorage is a better alternative option for localStorage.
A page session lasts only as long as the browser tab is open, and it will survive over page reloads and restores. But opening a page in a new tab or window will create a new session. And we have a storage limit is larger than a cookie (at most 5MB)

Using Session storage

setting data

We can store data using setItem method.
syntax :

sessionStorage.setItem('key', 'Value');

the above code will add the given key-value pair to session storage.
EG:

so the session storage now has data with key MyCat

Getting data

We can get data using the getItem method.
syntax :


sessionStorage.getItem("key")

the above code will return data of that key from session storage.
EG:

Removing Data

We can remove data using removeItem or clearmethod.
syntax :

sessionStorage.removeItem("key")
sessionStorage.clear()

removeItem will remove a specific key from session storage, whereas the clear method will clean up the entire session storage

DEV Community: Edison Augusthy

🚀⚙️18 developer tools every developer should use in 2026

1. Angular Render Scan

2. Multi Device Viewer

3. React Scan

4. ToDiagram

5. diagrams.net

6. Excalidraw

7. Jam

8. Beeceptor

9. AFFiNE

10. fish shell

11. Free Public APIs

12. Polypane

13. Skills

14. AI Directories

15. Patterns.dev

16. An Introduction to Domain-Driven Design

17. Software Engineering at Google

18. LLMTEXT.com

Final thoughts

Sell your skills

1) share market

2) Sell your skills on amazon

3) A simple app can give you 100 Dollars each month

"the best time to start was yesterday. the next best time is Now"

✨♻️One line - Date Operations in JavaScript

Cheking

Is Before

Is Same

Is After

Is Leap Year

Is a Date

Get Or Set

Date of Month

Day of Week

Day of Year

Week of Year

Days in Month

Parse

Manipulate

Add

Subtract

End of Time

Display

Time from now

Difference

🚀⚙️Deep Dive in to JavaScript Engine - (Chrome V8)

V8

HOW V8 WORKS

Ignition

TurboFan

🌳Say goodbye to LocalStorage 🚀

So what are localStorage disadvantages..?

Switching to session storage

Using Session storage

setting data

Getting data

Removing Data

So what are `localStorage` disadvantages..?