Anselm Hannemann anselmh

Sustainable front-end experiences. Ethics matter. I do https://wdrl.info/, @colloq.

anselmh / JS including at bottom

Created January 14, 2011 08:00

credit to html5boilerplate.com

	<!-- Javascript at the bottom for fast page loading -->

	<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
	<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.4.js"%3E%3C/script%3E'))</script>


	<!-- scripts concatenated and minified via ant build script-->
	<script src="js/plugins.js"></script>
	<script src="js/script.js"></script>

anselmh / awesome modx construct

Created January 19, 2011 10:35

with If and output filters for blogging

	//one - more flexible possibility since it's made with flexible If snippet

	[[!If? &subject=`[[+introtext]]` &operator=`isnotempty` &then=`[[+introtext]]` &else=`[[+content:strip_tags:ellipsis=`500`]]` ]]

	//the better one when it comes to performance (thank you Mark-H)
	[[+introtext:default=`[[+content:strip_tags:ellipsis=`500`]]`]]

anselmh / MODX Revo OutputFilter Error

Created January 20, 2011 08:42

this code doesn't output correct stripped content? What's wrong with that?

	// code from my template
	// should result the meta-description
	// should strip html-tags from content and limit to 175 characters
	// actually doesn't stripTags but limits to 175 characters

	[[*content:stripTags:strip:limit=`175`]]

anselmh / responsive-img-wo-cookies.html

Created June 21, 2011 11:34

Responsive Images using Dynamic Base URL from @derSchepp

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>Responsive Images using Dynamic Base URL</title>

	<script>
	(function(){
	var assetSubdomain = null;
	if( screen.width < 480 ){

anselmh / prerender-avoid-ga.js

Created June 27, 2011 09:15

prerender-avoid-ga

	// if you have analytics, set them in pagevisibility mode to get real-user-trackig according to prerender-issues in Chrome/WebKit.
	var viewCounted = false;
	function handleVisibilityChange(evt) {
	//Only count the view once we're done prerendering AND the document is done loading
	if (document.webkitVisibilityState == 'prerender'
	\|\| document.readyState != 'complete' \|\| viewCounted)
	return;
	/* Implementation of view counting system starts here */

	// Code for Google Analytics \| Change UA-XXXXX-X to be your site's ID

anselmh / responsive-attr-html5.html

Last active September 26, 2015 21:07

responsive attribute for HTML/CSS3

	<!-- backwards compatible solution -->
	<!-- the browser should read media-query and then download the right file for the actual screen size -->
	<img media-xs="(min-width:640px)" media-xs-src="http://cdn.url.com/img/myimage_xs.jpg" media-m="(max-width:1024px)" media-m-src="http://cdn.url.com/img/myimage_m.jpg" media-xl="(min-width:1025px)" media-xl-src="http://cdn.url.com/img/myimage_xsl.jpg" src="http://cdn.url.com/img/myimage_xs.jpg" />

	<img media-xs="(max-width:640px)"
	media-xs-src="http://cdn.url.com/img/myimage_xs.jpg"
	media-m="(max-width:1024px)"
	media-m-src="http://cdn.url.com/img/myimage_m.jpg"
	media-xl="(min-width:1025px)"
	media-xl-src="http://cdn.url.com/img/myimage_xsl.jpg"

anselmh / dabblet.css

Created January 7, 2012 22:21

The first commented line is your dabblet’s title

	/**
	* The first commented line is your dabblet’s title
	*/

	body{
	background: #CCC;
	padding: 500px;
	}

	#map_de_muc {

anselmh / viewport.css

Created January 9, 2012 11:50

change css on viewport based sizes

	#id{
	background: #999;
	position: fixed;
	top:0;
	width: 100%;
	height: 10em;
	z-index: 99999999999999;
	padding-top:4em;
	-webkit-transition: all linear 1s;
	-moz-transition: all linear 1s;

anselmh / dabblet.css

Created January 14, 2012 13:48

circled-font

	/**
	* circled-font
	*/

	/* currently it's an ellipse not a circle */
	.iconstyle {
	background: #000;
	color: #B4E3FF;
	border-radius: 50%;
	padding: .6em;

anselmh / imgtag.html

Created January 24, 2012 08:53 — forked from ike/imgtag.html

The New Img Tag (evolved)

	<img src="large-default-file.jpg" media="screen and (min-width:601px)" alt="this is alternative text for default file" title="this is title for default file">
	<source src="smaller.jpg" media="screen and (max-device-width:600px)" alt="this is alternative text for smaller file" title="this is title for smaller file">
	<source src="tiny.jpg" media="screen and (max-device-width:320px)" alt="this is alternative text for tiny file" title="this is title for tiny file">
	<source src="monochrome.jpg" media="monochrome" alt="this is alternative text for monochrome file" title="this is title for monochrome file">
	</img>