Weekly Snap: Heira, HTML Floats Upgraded & Logstash Quick Start

weekly snap6 – 10 October offered guides on Heira, Logstash and the new generation of floats in HTML, plus a few OSDC announcements along the way.
Eva started the week counting 50 days to the OSMC by sharing Alan Robertson’s talk: “Monitoring and Discovery with Limit”.
She went on to announce early bird specials for the OSDC in Berlin coming up in April, and tout the Call for Papers.
Achim then gave a short guide to Hiera, a key value backend for Puppet while Thomas W presented his updated quick start tutorial on Logstash.
Lastly, Marius celebrated “Flexible Box Layout Module” as the neo-“floating” containers in HTML.

After "next generation floating" in HTML

Gang und gäbe ist mittlerweile der Gebrauch von umfließenden Container in HTML (float). Allerdings führt das oft zu Problemen wenn man z.B mit unterschiedlichen Abständen und Positionierungen hantiert. Außerdem ist dieses Modell einfach umständlich und grausig zu implementieren.
Mit einem W3C Vorschlag Ende 2013 hielt das “Flexible Box Layout Module” Einzug in den CSS3 Standard. Die Idee hat man schon früher in der graphischen Programmierung. Innerhalb eines Containers wird eine unbestimmte Menge an Elementen untergebracht. Die Aufteilung der verfügbaren Breite erfolgt anhand von Anteilen.
Knapp ein Jahr später ist das Feature auch in den meisten Browsern verfügbar (Versionen später als November 2013).
Ein Beispiel
CSS:

.flex-container {
    display: flex;
}
.flex-item {
    flex: 1 1 auto;
    border: 1px #ff8000 solid;
}

HTML1 (gleiche Aufteilung):

Column 1
Column 2
Column 3

HTML2 (unterschiedliche Aufteilung):

Column 1
Column 2
Column 3
Column 4
Column 5

Weitere Informationen (z.B. Ausbreitung und Ausrichtung) findet man in den folgenden Links:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/
Fazit: Endlich geile Container 😉

Marius Hein
Marius Hein
Head of Development

Marius Hein ist schon seit 2003 bei NETWAYS. Er hat hier seine Ausbildung zum Fachinformatiker absolviert, dann als Application Developer gearbeitet und ist nun Leiter der Softwareentwicklung. Ausserdem ist er Mitglied im Icinga Team und verantwortet dort das Icinga Web.

Weekly Snap: CSS2 floats to AKCP converters, OSDC & NETWAYS Jobs

29 Mar – 3 Apr: sprang over Easter with CSS floating style, industrial sensor converters, OSDC early bird reminders, NETWAYS jobs and an April special for Nagios/Icinga voice notification services.
The development team kicked off with Marius’ CSS2 tip for floating page layouts. First in ‘clearfix’, inserting a ‘clear’ after a float, second with ‘overflow:hidden|auto’ for a new display context. This ensures that the ‘clear’ doesn’t creep into the entire page, staying in the desired area automatically without needing to create strange margins.
On the monitoring front we reflected on the March project of the month, while Martin showed us how to integrate third-party sensors for those tricky industrial monitoring needs. From temperature sensors for pipelines or outdoors, to absolute pressure measurement and CO ² sensors – all these industrial sensors can be converted into electricity or voltage so their results can be transmitted over long distances to an AKCP sensorProbe2 which then forwards them on via SNMP to any monitoring software such as Nagios and Icinga.
Following on, Manuela reminded early birds to snap up the last ticket specials for the OSDC coming up on 23 – 24 June, while Karo announced our search for 3 new enthusiastic professionals to join the NETWAYS team. Project managers, Linux consultants and bookkeepers are welcome to apply, as are any would-be apprentices for software development.
Of course, no April could begin without a fool on the 1st day of the month – check out the newest voice notification services we’re offering through our partner call center in India and enjoy!

Next generation floating in HTML

Wer floats in html mag, wird diese lieben.

Nach dem sich CSS2 mehr und mehr etabliert kann man gefloatete Seitenlayouts auf ganz neue Art und Weise durchführen.
Erstmal der Quelltext:

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.floatbox {
  overflow: hidden;
}
.col {
  float: left;
  width: 200px;
}
<div class="floatbox clearfix">
	<div class="col"><p>LINKS</p></div>
	<div class="col">
		<p>Lorem ipsum dolor sit amet, consectetue.</p>
		<p> Donec quam felis, ultricies nec, pellentesque.</p>
		<p> In enim justo, rhoncus ut, imperdiet a!</p>
	</div>
</div>

Das wichtigste befindet sich in den Klassen ‘clearfix’ und ‘floatbox’. Mit ‘clearfix’ bedienen wir uns CSS2 und fügen nach
einem float den clear gleich mit ein. Ein extra html Element, um den float abzuschließen,
wird hierfür nicht verwendet (die Pseudo-Klasse :after erledigt das für uns).
Als zweites schaffen wir uns einen neuen Anzeigekontext mit ‘overflow: hidden|auto’. Dieser Kontext bewirkt das ein ‘clear’ sich z.B. nicht Global auf die gesamte Seite auswirkt, sondern nur auf den gewollten Bereich. Auch richtet dieser Bereich die Inhalte neu aus. So muss ein float mit unterschiedlicher Länge, welcher auf der Folgeseite um fließt, nicht mit seltsamen margins auf Kurs gehalten werden (z.B. margin-left: 205px). Die weitere Positionierung und Abstandseinstellung verläuft so wie man es erwartet!
Mehr Informationen findet man hier:
Floats 1
Floats 2
Floats 3

Marius Hein
Marius Hein
Head of Development

Marius Hein ist schon seit 2003 bei NETWAYS. Er hat hier seine Ausbildung zum Fachinformatiker absolviert, dann als Application Developer gearbeitet und ist nun Leiter der Softwareentwicklung. Ausserdem ist er Mitglied im Icinga Team und verantwortet dort das Icinga Web.