Kategorie: Web Frontend

Web Frontend

Kategorien
Android C C++ iPhone/iOS Java Mobil MySQL PHP Web Frontend

Teil 2: Clean Code – richtige und falsche Kommentare

Nach dem Buch (Kapitel 4):  „Clean Code – Refactoring, Patterns, Testen und Techniken für sauberen Code“ von Robert C. Martin.

„Kommentieren Sie schlechten Code nicht – schreiben Sie ihn um.“

(Brian W. Kernighan und P.J. Plaugher)

 

Kommentare können beides sein, hilfreich und hinderlich:

  • hinderlich, wenn Sie überholt sind und Fehlinformationen liefern
  • störend, wenn Sie zu lang sind und unnötig
  • hilfreich, wenn Sie wohlplatziert sind

Der Einsatz von Kommentaren „soll unsere Unfähigkeit ausgleich, uns in unserem Code klar auszudrücken“(S.85). Bevor man einem Kommentar schreibt, sollte man vorher überlegen, ob der Code nicht noch ausdrucksstarker geschrieben werden könnte.

Weiterlesen „Teil 2: Clean Code – richtige und falsche Kommentare“
Kategorien
C C++ Java Mobil PHP Web Frontend Webdeveloper Tools

Code kopieren Zeilennummern löschen Regex

Beim Kopieren von Code von Webseiten(z.B. Zend.com) kann es vorkommen, dass der Code Zeilennummern enthält, z.B.

  1. // Parameters for ClientAuth authentication
  2. $service = Zend_Gdata_Gbase::AUTH_SERVICE_NAME;
  3. $user = „sample.user@gmail.com“;
  4. $pass = „pa$$w0rd“;
  6. // Create an authenticated HTTP client
  7. $client = Zend_Gdata_ClientLogin::getHttpClient($user, $pass, $service);
  9. // Create an instance of the Base service
  10. $service = new Zend_Gdata_Gbase($client);
Um die Zeilennumern zu löschen, kann mit z.B. mit Netbeans folgenden Befehl ausführen:
STRG+H (SEARCH and REPLACE)
Find what: [0-9]{1,2}.\n
Replace with: (leer lassen)
Auswählen: Regular Expressions
Regular Expressions Netbeans
Kategorien
SEO

Google SERP Description nicht nachvollziehbar

Bei einem Kunden hatte ich das Problem, dass es unpassenden Text in der Google Suche angezeigt wird, der nicht von der Seite stammt, die ich optimieren wollte:

Verleih, An- und Verkauf von gebrauchten CDs sowie Vermietung des dazugehörigen Equipments.

Wie ich herausgefunden habe, kam dieser Text von dem dmoz.org Eintrag.

Um zu verhindern, dass der Text angezeigt  wird, muss man den folgenden Header setzen (für alle Bots):

<meta name="robots" content="NOODP" />

 

Kategorien
JavaScript Web Frontend

Javascript Cookies setzen und auslesen

Die Arbeit mit Cookies in Javascript ist sehr unhandlich, deswegen sollte immer eine Bibliothek benutzt werden, die einem schwer lesbaren Code erspart, sonst muss man sich mit solchem Code anfreunden:

a = document.cookie;
cookiename = a.substr(0,a.search('='));
cookiewert = a.substr(a.search('=')+1,a.search(';'));
if(cookiewert == '')
{
cookiewert = a.substr(a.search('=')+1,a.length);
}

Es empfiehlt sich die Bibliothek Javascript Cookie Library with jQuery bindings and JSON support für das Cookie Handling zu benutzen. Diese kann mit oder ohne jQuery benutzt werden. Mit jQuery sehen die Operationen dann so aus:

$.cookies.set('foo', '0');

var foo = $.cookies.get('foo');
Kategorien
HTML5

HTML5 Tutorial

Die neuen Funktionen und Anwendungen von HTML5 im Überblick

Die neuen Formulare

Auch bei Formularen hat HTML5 interessante Neuerungen implementiert. Die Benutzerfreundlichkeit wird durch die neuen Funktionen verbessert, die zwar schon vorher durch Javascript-Bibliotheken vorhanden waren, jedoch jetzt endlich auch ohne aktiviertes Javascript benutzt werden können. Dies gilt im Übrigen für fast alle neuen Funktionen.

number

Mit einem einem input-Formular des Typs number, ist es möglich Zahlenwerte vom User einfacher abzufragen, sowie einen Wertebereich sowie einen Mindestabstand zwischen den möglichen Wahlwerten vorzugeben ohne den User mit komplizierten Regeln zu überfordern.
Aktuell kann nur Opera diesen Typ darstellen. <input type="number" min="18" max="65" step="1">

 

Darstellung in Opera 11.01: html5 number opera
Ihr aktueller Browser:
Weiterlesen „HTML5 Tutorial“
Kategorien
CSS jQuery WordPress

Entfernen von leeren HTML paragraph Tags

Der Editor von WordPress generiert leere <p> Tags, die nicht sehr hilfreich sind beim Gestalten.

Eine Lösung via CSS (CSS3 – Kampatibilität :empty):

p:empty
{
    display:none;
}

oder mit besserer Browser Kompatibilität und jQuery:

 <script>
    $("p:empty").hide();
</script>
Kategorien
HTML5

Parallax Effekt

Eine faszinierender Effekt, in dem sich ohne Flash nur mit HTML5 der Vordergrund unterschiedlich schnell bewegt im Vergleich zum Mittel- bzw. Hintergrund.

Bsp gefällig? egopop, unit51, stephband

Die Bibliothek zum Erstellen eigener Webseiten gibt es hier. Achtung, es wird zwingend jQuery in einer niedrigen Version (1.2.6) benötigt, es kann also zu Problemen kommen in manchen Fällen.

Kategorien
Apache Webserver PHP SEO Webdeveloper Tools

Profiling mit XDebug und Webgrind

Wenn die Performance einer Webseite nachgibt, stellt man sich oft die Frage, an welche Funktion/Modul liegt der Performanceverlust? Die Lösung ist das Profiling einer Webseite.

Profiling beschäftigt sich der Analyse der Funktionsaufrufe eine Webseite. Es kann dadurch analysiert werden, welche Teile sehr lange brauchen oder welche Funtionen doppelt aufgerufen werden.

Profiling sollte nicht auf einem Produktivsystem ausgeführt werden, weil die Performance einbricht und Ausgaben sichtbar sind. Übrigends: Wer seine Webseite schneller macht, SEO optimiert gleichzeitig.

Weiterlesen „Profiling mit XDebug und Webgrind“
Kategorien
SEO

On-Page SEO Checklist

Für eine Basis-SEO einer Webseite sollten die folgende Punkte beachtet werden. Die Checkliste wird kontinuierlich erweitert und nur eine Gedankenstütze für mich.

  • URLs aufhübschen, html Endung wenn möglich
  • img mit alt und title-Tag versorgen, title länger und anders als alt-Tag
  • Links mit title-Tag versorgen, nicht zu viel Text (höchstens 3 Wörter)
  • Überschriftenhierachie checken, nur eine h1
  • h1, title, description, Links zur Seite  mit Keyword füllen
  • Titel 70 Zeichen, damit von Google nicht gekürzt
  • Description 150-160 Zeichen, soll zum klicken animieren, Keywords weit vorn im Text
  • Description solle im Text vorkommen
  • Javascript Link für Impressum
function javascriptLink(url)
{
    window.location.href = "/" + url;
}
  • www-Umleitung
  • Umleitung der alten indexierten Seiten
  • kein doppelter Content
  • mehrfache Verlinkung der wichtigen Seiten
  • mehrere Domains auf die Seite vorhanden? Umleitung einrichten (doppelter Content)
  • Sitemap
  • css, javascript Dateien vereinigen, Ladezeit verringern
Kategorien
JavaScript Web Frontend

Google Maps JavaScript API V3 und Utility Library V3 Tutorial

Google Maps Karten sind auf fast jeder Webseite aufzufinden. Die neueste Version Google Maps JavaScript API V3 bietet:

  • erweiterte Unterstützung für mobile Geräte
  • Integration von Google Street View
  • verbesserte Performance
  • Weiterentwicklungen  in Zukunft, da Version V2 als veraltet erklärt wurde seitens Google
  • es wird kein API Schlüssel mehr benötigt, wie bei V2
Weiterlesen „Google Maps JavaScript API V3 und Utility Library V3 Tutorial“