Error doh

Beste Praxis instead

Best practice instead

[SOLVED] Find code error solutions.

Js - Uncaught TypeError:...
scss - $map merge error
ios - svg not displaying

Js - Uncaught TypeError:...
scss - $map merge error
ios - svg not displaying

/* Most common error in js
But what is the problem? 
Why does it happen?
How can we solve it?
*/
Uncaught TypeError: Cannot set property 'xyz' of...
/* 
The problem is the execution stack
The solution is to access the DOM after the page has loaded.
Read more about the execution stack and the DOM.
*/

DOM

Code execution stack vs DOM

Der Javascript execution stack und die lokale oder globale Deklaration der Variablen, sind nur das Grundkonzept welches einem gratis als Kurs angeboten wird, jedoch der Error bleibt beständig.

The Javascript execution stack and the local or global declaration of the variables, are only the basic concept which is offered for free, but the error remains persistent.

Frustriert? Hier die Lösung gratis:

Frustrated? Here is the solution for free:

/* 
Javascript cannot read or write an element if 
the browser has not yet build the DOM.
Reading a switch in the DOM 
*/
const switch = document.querySelector('.theme-switch');
/* 
This means that our code wants to read or write 
to an html element which exists only later.
The DOM is a huge folder with all possible nodes 
necessary to connect all html elements with all css styles.
So the solution is obvious: 
Javascript variables, which access the DOM directly, 
CANNOT be initialized BEFORE the DOM has been build.
*/

defer script

Normaler Lösungsweg

Common solution

Um dieses Problem zu eliminieren wird oft die "defer" property benützt, als eine von mehreren möglichkeiten

To eliminate this problem the "defer" property is frequently used, as one possible solution

<!-- The javascript script is loaded at the end -->
<head>
  <!-- add "defer" to the js script loading tag -->
  <script defer src="app.js" type="text/javascript"></script>
</head>
<!-- The script is loaded after the footer html code 
has been loaded.
Now the meta tag can be placed in the html "head".
Disadvantage: The time of loading can not be defined.
Manual initialization offers more flexible options.
Below is a simple initialization method. -->

init

Initialisations Strategie

Initialization strategie

Um beim Page-load die Reihenfolge und damit das Timing einzuhalten, kann die

To keep the order and timing of the page-load, you can use the

window.onload = function() {}

Funktion, welche sehr langsam aber zuverlässig ist.

function, which is very slow but solid.

Dies bringt den Vorteil das eine Funktion ohne fehler zum laufen kommt.
Danach kann die Timing-Performance optimiert werden.

This brings the advantage that a function begins to work without error.
After that the timing performance can be optimized.

Ich hoffe, dass dies hilft, die Frustration zu beseitigen - kostenlos und ohne aufgeblähte Inhalte, die ein "bezahltes Tutorial" füllen.

Hope this helps cure the frustration for free and without bloated content to fill a "paid tutorial".

// Initializing a DOM elements
function themeMode(init) {
  const switch = document.querySelector('.theme-switch');
  if(init) {
    // add an event to the element
    switch.setAttribute('onclick', themeMode(false));
  } else {
    // onclick do something
  }
}

window.onload = function() {
  themeMode(true);
}

scss $map merge Error

[SOLVED] recursive problem

Das rekursive Problem ist in der Software-Wissenschaft bestens bekannt.
Der Scss-Compiler kann einen Schlüssel nicht mit einem übergeordneten Element zusammenführen und wird einen fatalen Fehler beim kompilieren erzeugen.

The recursive problem is well known in software sience.
Scss compiler cannot merge a key with a parent element thus create a fatal error at compile time.

// MIXIN MAPS MERGE
@function non-destructive-map-merge($parent-map, $child-map) {
  $result: null;
  $result: $parent-map;
  @each $key, $value in $child-map {
    @if (not map-has-key($result, $key)) or (type-of(map-get($result, $key)) != type-of($value)) or (not (type-of(map-get($result, $key)) == map and type-of($value) == map)) {
      $result: map-merge($result, ($key: $value));
    }
    @else {
      $result: map-merge($result, ($key: non-destructive-map-merge(map-get($result, $key), $value)));
    }
  }
  @return $result;
}
// it peals the layers recursivly until every nesting is unified into the new map

ios missing svg

[SOLVED] needs property

Das ios Betriebssystem ist manchmal schwierig zum Probleme beheben, da es dazu ein apple Computer benötigt.

The ios operating system is sometimes difficult to debug because it requires an apple computer to do so.

Ein svg benötigt im ios width:100%; oder height:100%; nebst einer HTML property.

An svg needs in ios width:100%; or height:100%; along with an HTML property.

<!-- 
## ios svg missing - try add these properties instead ##
style="width:100%;height:100%;" 
viewBox="0 0 50 50"
preserveAspectRatio="none" 
xml:space="preserve"
-->
<svg viewBox="0 0 50 50" preserveAspectRatio="none" xml:space="preserve">
  <line class="st0" x1="25" x2="25" y2="50"/>
  <line class="st0" x2="50" y1="25" y2="25"/>
</svg>
<!-- 
Upload to webserver go to ios broswer and delete the cache completely.
Now it should appear as excepted.
-->