What would the ideal tool be like, in order for you to code faster?

We are a team of 3 people working on a tool that will help developers build a structure easily, so they don’t waste time doing the same thing every time they are starting to work on a web app for ex. Also, adapting something from someone normally is more work in the end, so we are trying to solve that.

We are wondering if this tool would be good to have, or it doesn’t make any change.

If it does make changes, what else would you need from it so it would code faster?

Make a simple api that connects the JS methods library to key words where basic actions bring up associated methods, for ex.- “search” brings up .find(), .map(), .forEach(). Then break down the different actions needed into separate “paragraphs” in the editor for the coder to try to assemble and put into order. That should make you some money.

The speed of coding doesn’t seem to be a significant factor as 95% of the time you’re staring at the screen instead.

3 Likes

Your best bet is to make a plug-in for a popular tool like VSCode.

1 Like

My recommendation is that you make something for yourself first to improve your coding, and then branch out from there to help others too.

1 Like

To expand that a little bit, A significant number of coders (at least, the good ones) don’t start typing until they’ve got a good idea of what they’re going to code and how they’re going to code it. In that case, hinting might be somewhat of a time saver for some, and an annoyance to others. The other significant amount of time ‘staring at the screen’ is the debugging step(s). So the standard tools like typo hunting and variable tracking can be helpful there.

I reread your post this morning. It kinda sounds like you’re talking about snippets.

Here’s a couple I made for VSC. It really doesn’t get much easier than this.

{
    "React Functional Component": {
            "prefix": "component",
            "scope": "typescriptreact",
            "body": [
                    "import React, { FunctionComponent } from 'react'",
                    "",
                    "import styles from './styles.module.scss'",
                    "",
                    "interface ${TM_DIRECTORY/^.+\\/(.*)$/$1/}Props {}",
                    "",
                    "const ${TM_DIRECTORY/^.+\\/(.*)$/$1/}: FunctionComponent<${TM_DIRECTORY/^.+\\/(.*)$/$1/}Props> = () => <div />",
                    "",
                    "export default ${TM_DIRECTORY/^.+\\/(.*)$/$1/}",
                    ""
            ]
    }
}

and

{
	"React Functional Component": {
			"prefix": "container",
			"scope": "typescriptreact",
			"body": [
					"import React, { FunctionComponent } from 'react'",
					"import { connect } from 'react-redux'",
					"import { AnyAction } from 'redux'",
					"import { ThunkDispatch } from 'redux-thunk'",
					"",
					"import { AppState } from '../reducers'",
					"",
					"interface ${TM_FILENAME_BASE/^.+\\/(.*)$/$1/}Props {}",
					"",
					"const ${TM_FILENAME_BASE/^.+\\/(.*)$/$1/}: FunctionComponent<${TM_FILENAME_BASE/^.+\\/(.*)$/$1/}Props> = () => <div />",
					"",
					"const mapStateToProps = (state: AppState) => ({",
					"\tx: state.x.y,",
					"})",
					"",
					"const mapDispatchToProps = (",
					"\tdispatch: ThunkDispatch<AppState, void, AnyAction>",
					") => ({",
					"\tx: () => dispatch(null),",
					"})",
					"",
					"export default connect(",
					"\tmapStateToProps,",
					"\tmapDispatchToProps",
					")(${TM_FILENAME_BASE/^.+\\/(.*)$/$1/})",
					""
			]
	}
}

That is too vague for me to be able to comment.

I do not know how that is relevant. I assume it is but I just don’t understand how.

And what does that mean?

Also too vague.

I am not sure if you are trying to ask about the tool you are describing or about debugging in general. The responses so far seem to be only about the latter.

As for tools in general, something I would like to be able to do is to see the timer(s); where they are created and what executes when the timer hits (expires or whatever). And perhaps something that shows all events that have handlers and the handler(s). And something that allows us to go to every reference of something, including in external js files.

1 Like

thanks for the answer. i have one more question, would you like to test our tool and give us feedback?

thanks, i think it’s best to test it, would you want that?

Yes, I would love to. Please tell me how you would like to continue our correspondence. When you responded directly to my posting I got it in my email updates.

Definitely.

Let’s test it out. I’ll gladly add input.

I agree with everything. The React stuff seems like scaffolding. The first thought I had was when you hit “!” in VSC and the HTML scaffolding comes up. Maybe like an “autocomplete” plugin for entire phrases by accessing the dropdown in intellisense. Likely less sophisticated to build than new debugging tools.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.