Code better

Facts to improve your coding skills

#1 Respect the tab

✓ Do

#element {
  font-size: 100%;
  color: #ffffff;
}

When you code having the tabulator in mind, your code becomes really neat & is readable.

✗ Don't

   #element {
font-size: 100%;
    color: #ffffff;
  }

If you just spew out your ideas, the code isn't readable and looks unstructured.

#2 Use new elements

Lines of code

old XHR

Lines of code

new fetch API

Most of new coding specifications and elements are easier to understand and faster. So use them, if your current browser stack is supported.

#3 Descriptive Names

Meaningless names

Descriptive names

If you use names like dxy, you'll need much more time to get back into your project. Better use descriptive names like distanceBetweenXY. So you don't need to reverse engineer and get back faster into the project

#4 One purpose functions

“Programming is breaking one big impossible task into several small possible tasks.” — Jazzwant

Click to see simplified version

function walkInSquare(element) {
  element.right + 1;
  element.bottom + 1;
  element.left + 1;
  element.top + 1;
}
function walkInSquare(element) {
  walkRight(element);
  walkBottom(element);
  walkLeft(element);
  walkTop(element);
}

function walkRight(element) {
  element.right + 1;
}

function walkBottom(element) {
  element.bottom + 1;
}

function walkLeft(element) {
  element.left + 1;
}

function walkTop(element) {
  element.top + 1;
}

#5 Keep learning

At the end please don't stop to read newsletter & blogs, try new techniques as they come
AND KEEP ON ROCKING

Konzept

Ziel

Da ich meine Leidenschaft als Webentwickler zum Beruf machen konnte, möchte ich mit dieser Infografik angehenden Entwicklern eine kleine Ansammlung an Tipps mit auf den Weg geben.

Die Idee

Um die Tipps möglichst gut zu konsumieren, habe ich Code-Blöcke mit Syntax-Highlighting eingebunden. Außerdem versuche ich den Blick des Benutzers immer auf einen Tipp zu fokussieren.

Diagrammtypen & Animation

Als Diagrammtypen verwende ich den sogennanten Donut, welcher zur Darstellung der verschiedener Größenverhältnisse optimal geeignet ist.

Animation dienen hier zur Blickführung des Benutzers genauso wie zum Austausch verschiedener Elemente.

Gestaltung & Farbgebung

Durch die klare Gestaltung und die minimierte Farbgestaltung werden die Tipps leichter verständlich für den Benutzer.
Hinzu kommt die Unterstützung der Benutzerfreundlichkeit der Infografik.

Eingesetzte Skripte / Frameworks

Datenquellen