A general question

1

Hi Coders,

I have a question. The more you built the faster and efficient you get, but I have some problems with debugging mistakes.

I can built faster than before, but to find the tiny mistakes (like misspelling) after I built the project, takes me a lot of time.

Does anyone have similar problem? And have anyone a solution to the problem?

I don’t think I am the first one to ask this.

Thanks Coders.

2

Going fast means making mistakes.

1 Like
3

There’s an old saying in Special Forces, “Slow is smooth. Smooth is fast.” Or to put it the way we learned as children, “haste makes waste”.

I would say slow down a little. And every coder makes mistakes. But as you get better, you make fewer of them and you get better at finding them.

Do you use a linter? That might catch a few things. As far as speling mistakes (I make a lot), I use an extension Code Spell Checker on VSC - it flags little mistakes.

But I’d recommend learning to code slowly and smoothly. Check and debug as you go. As you get better, you can speed up a bit and stretch out the space between testing, but go slow at first. Focus on accuracy and planning in the beginning.

2 Likes
4

Debugging takes at least 10x time comparing to coding, so if you take a good moment to think and then code “slowly and smoothly” as @kevinSmith suggested that would be your top speed. Typing fast will not make you code fast, saving snippets will :wink:

1 Like
5

Thanks kevinSmith, I don’t know linter.

6

Hi Mr.P,

I use a serie of tools to avoid typos and errors:

scripts

Miscellaneous scripts to create folders, files, etc.

The idea is to enforce some kind of structure in new projects, that way is easier to find/search something.

templates and formatters:

With those you can reduce the number of key presses(less mistakes):

example:

ul>li.item$*5

outputs to

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>
  • yassnipet
  • Prettier (code formatter):

A code formatter is a useful way to avoid hours of spaces counting, and alignments

https://prettier.io/

Validators and linters:

  • W3C Markup Validation Service

wikipedia article

Markup validation is an important step towards ensuring the technical quality of web pages. However, it is not a complete measure of web standards conformance.
…
Mark-up validators cannot see the “big picture” on a web page,[5][6] but they excel at picking up missed closing tags and other technicalities.

W3C validate by file:

The W3C Markup Validation Service

Video:

  • For CSS:

http://jigsaw.w3.org/css-validator/

Cheers and happy coding :slight_smile:

1 Like
7

A linter is just a program that checks that your code is formatted correctly and sometimes catches problems. They drive you crazy until you get used to them. Most editors should be able to set them up. For JS, eslint is very common and the Air B&B settings are probably the most common.

1 Like