In Vim umgebende HTML-Tags entfernen

Ein gerade für Webentwickler nützliches Vim Plugin ist vim-surround von Tim Pope. Man kann nicht nur sehr schnell Texte in einfache bzw. doppelte Anführungszeichen setzten, wechseln oder gar diese löschen, sonder z. B. auch umgebende HTML-Tags entfernen.

Für die Normal mode Commands dst gibt es auch hier wieder eine super Eselsbrücke – delete surrounding tag.

Im animierten Gif kann man das ganze mal in Aktion sehen.

delete surrounding html-tag in vim

Mittels Closure durch ein Array iterieren in JavaScript

Im nachfolgenden (vereinfachten) JavaScript Closure Beispiel iteriere ich durch ein Array und gebe den Inhalt in einem Div mit der ID ‚out‘ aus.

var myarr = ["a", "b", "c", "d"], getNext, $out = $("#out");

function iterator(arr) {
  var idx = 0;
  return function () {
    return arr[idx++];
  };
}

getNext = iterator(myarr);

$out.append(getNext()+'<br />'); // a
$out.append(getNext()+'<br />'); // b
$out.append(getNext()+'<br />'); // c
$out.append(getNext()+'<br />'); // d

Ein Beispiel hierzu habe ich auf JSFiddle eingebunden.

Einheitliche Submit Buttons via CSS

Dem ein oder andern Webentwickler mag es schon aufgefallen sein:

„Einheitliche Submit Buttons sollten browserübergreifend kein Problem sein, aber weshalb sieht der via CSS angepasste Submit Button im Firefox anders aus, obwohl ein CSS-Reset verwendet wurde?“

Anhand des folgenden Screenshots wird das Problem deutlich:

Firefox without fix

Wie man hier gut erkennen kann muss irgendwo noch ein Abstand definiert sein, welcher die grüne Box im Firefox etwas breiter und höher anzeigt als in den anderen Browsern. Ein explizites margin:0 !important; und padding:0 !important; zeigt keinerlei Wirkung.

Nach einiger Recherche bin ich auf das Standard Formular Stylesheet von Mozilla Firefox und einen interessanten Beitrag bei Stackoverflow gestoßen.

Das Stylesheet kann man sich in Firefox direkt ansehen, indem man resource://gre-resources/forms.css in die Addresszeile eingibt.

Bei Webseiten mit angepassten Formularen empfiehlt es sich daher folgende Zeilen in bzw. nach dem CSS-Reset zu definieren:

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] &gt; input[type="button"]::-moz-focus-inner {border:0;padding:0;margin:0;}

Nach der Einbindung sehen unsere Testseiten wie folgt aus:

Firefox with fix