arnalyse

// just use remify where appropriate
body
  margin: remify(32px 10px 0 24px)

arnalyse

Der Code des Bookmarklets setzt die `hyphenate`CSS property für alle unterstüzten Browser:

    javascript:jQuery('<style%20type="text/css"%3E*{-webkit-hyphens:%20auto;-moz-hyphens:%20auto;-ms-hyphens:%20auto;hyphens:%20auto;}</style>').appendTo($("body"))

Um den das Bookmarklett zu nutzen einfach den folgenden Link in die Bookmarks-Bar ziehen und auf www.zeit.de aktivieren: 
<a href=javascript:jQuery('<style%20type="text/css"%3E*{-webkit-hyphens:%20auto;-moz-hyphens:%20auto;-ms-hyphens:%20auto;hyphens:%20auto;}</style%3E').appendTo($("body"))>hyphenate zon</a>

<a href="javascript:(function(){if(window.addCss!==undefined){window.addCss();}else{document.body.appendChild(document.createElement('script')).src='https://rocktronica.github.io/Add-CSS-Bookmarklet/addcss.min.js';}})();" class="button" id="aAddCss">addCSS</a>

arnalyse

Block – Element - Modifier

Ausgangssituation

Die CSS-Struktur auf ZEIT ONLINE ist etwas in die Jahre gekommen. Sie ist über die letzten Jahre organisch gewachsen und wird aktuellen Frontend-Trends nicht mehr gerecht.

Im Team haben wir uns auf die zukünftige Nutzung von BEM geeinigt. Dabei kamen wir zu ähnlichen Einsichten wie andere Entwickler und haben unsere Erfahrungen mit BEM bereits geteilt.

Aufgabenstellung

arnalyse

an animatable menu with gracefull IE 8 support

long story short:

• you can easily animate/transition the height and also the opacity of the menu, which gives it a nice fade'n'slide entrance.
• IE does not understand transitions or opacity, and depending on your setup, just the height: 0 wouldn't suffice (i.e. when you have negative margins…), so we go for visibility here, which does the – non animated – trick.
• you absoluteley need to do transition on visibility as well, otherwise the menu would just pop in or out of view.
• if you do not need to support IE 8, then forget about visibility, as IE 9 understands opacity, but doesn't understand transitions – which is fine.

arnalyse

	if (window.orientation == 90 || window.orientation == -90) { 
		myOrientation = 'landscape';
	} else {
		myOrientation = 'portrait';
	}
	
	// Nicos shorthand
	if (window.orientation ===  Math.abs(90)) {
    // …
	}

arnalyse

ul.nav {
	-ms-text-justify: distribute-all-lines;
	overflow: hidden;
	text-align: justify;
	text-justify: distribute-all-lines;

	li {
		@include inline-block();
	}

arnalyse

<? php

/*
	WORDPRESS: Howto get the UTC time of a post without an offset

	source: http://codex.wordpress.org/Template_Tags/get_post_time

	- the 'c' formats datetime string in ISO8601
	- the 'true' advises Wordpress to calculate the UTC/GMT 
	  instead of the timezone defined in Wordpress

arnalyse

#!/bin/sh
/usr/bin/perl -pi -e \
    'print `git symbolic-ref HEAD | sed -e "s|.*/\\(.*\\)|#[\\1] |"`
        if $. == 1' \
    "$1"

# copy this code into .git/hooks/prepare-commit-msg
# change the file permissions afterwards to 775

arnalyse

// 1. Goto Bundles -> Bundle Editor -> Edit Languages
// 2. Select CSS
// 3. Swap Lines 4 & 5

// fold css groups like
//   /* @group put-a-groupname-here */
//   …
//   /* @end   repeat-the-group-name-or-just-write-anything */
foldingStartMarker = '/\*\*(?!\*)|\{\s*($|/\*(?!.*?\*/.*\S))|\/\*\s*@group\s*.*\s*\*\/';
foldingStopMarker = '(?<!\*)\*\*/|^\s*\}|\/*\s*@end\s*.*\s*\*\/';

arnalyse

if (typeof window.console == 'undefined') {
	var names = ["clear", "groupCollapsed", "timeStamp", "log", "debug", "info", "warn", "error", "assert", "dir", "dirxml", "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];
	window.console = {};
	for (var i = 0; i < names.length; i++) {
		window.console[names[i]] = function(){};
	}
}