287 Implementing Search Results at 05:30 - ranting on strange inheritance

[hazartilirot]

Well, I'm just in agony. The following text is mere my rant.

I've spent a couple of hours on renaming all my methods, variables and re-organizing my code knocking it into as much similar to code Jonas wants us to follow.

• Okay. I've watched all of his courses and I got used to it. Don't try to think - just follow the order typing text mindlessly. I agree when you're not shown flowcharts, knowing nothing as to how the app is expected to be developed, it happens you may end up retyping most of your work.

Nonetheless, I just don't accept the way the inheritance is presented (or explained). For example, in our parent class variables are mentioned like: _renderTemplate _parentElement - i.e the recipe container _errorMessage _message

Yep, that's correct. They're mentioned, but not declared! Those variables are declared in a child in which we cut the code from. Apparently Jonas has turned all warning off although in my editor those variables are underlined with an error message "Unresolved variable". Strangely enough everything works! BUT HOW???? What the heck?

The main concept of inheritance is to get the same properties and behaviour (or if we want to change slightly behaviour we could use a polymorphism and override a method in a child). THOSE METHODS ARE NOT DECLARED, for example, const template = this._renderTemplate(expectRecipe);

in a parent method we use render method in which we call _renderTemplate method passing an argument. It only exists in a child method for the above-mentioned reason. The method should've been declared in the parent (not implemented), like, well, I'm not responsible for a mistake, but _renderTemplate(value) { return null; };. Otherwise, if we omit its declaration we would get "Unresolved function or method".

Jonas takes as an example the showSpinner() method (or renderSpinner in his case) at 05:55 in the video. He tells us how easy would be to re-use (or inherit) this method in all children since _parentElement exactly knows which element to attach a block of code to and then he says that _parentElement would be unique for each child.

  showSpinner() {
    const html =
      `<div class="spinner">
        <svg>
          <use href="${icons}_icon-loader"></use>
        </svg>
      </div> `;
    
    this._clear();
    this._parentElement.insertAdjacentHTML('afterbegin', html);
  };

I'm perplexed. How would any child know of _parentElement provided the latter is declared in another child (not in a parent)? Why has it been left in a child like other variables I've mentioned about?

Spending more time on sorting things out I've just found that changing all private variables and methods into protected wasn't a good idea at all for when we select all occurrence of # (dunno as to VS Code, I'm working in PyCharm, the hot keys are CTRL+ALT+DEL+J) the next issue you will be dealing with is it changes not only above-mentioned things, but does it also change ICONS and the HASH tag we're capturing at Events. I knew I was going to change # at <a class="preview__link preview__link--active" href="#${recipe.id}"> though I had had no idea it would change all my icons.

WHAT A MESS! I was about to sink into the quicksand.... the more you edit code the harder to escape from all of this.

Why does Jonas think that spending hours on editing and debugging is a good idea? We should've initially started from inheritance. Those mistakes (or features?) are given at a great expense - TIIIIIIIME! I mean, well, I know we're going to deal with debugging and re-writing code, but not when you're learning to structure an application. The whole pattern you once had in mind is broken. You're just sitting with eyes wide open untangling endless knots in vain.