CoffeeBreak CoffeeBreak:CoffeeBreak, the neverpanic.de blog 2010-07-30T23:14:02Z Creative Commons Attribution-NonCommercial-ShareAlike 2.0 Germany License ExpressionEngine tag:neverpanic.de,2010-07-30:/blog/ A Friday 13th story tag:neverpanic.de,2009-02-14:/blog/single/a-friday-13th-story/#3.72 2009-02-14T14:32:36Z 2009-02-16T13:01:37Z Clemens Lang neverpanic@gmail.com http://www.neverpanic.de/about-me This site is served by my own virtual server hosted by Carrot Servers in Austria. The hardware nodes running their servers are housed in one of Germany’s largest hosting company’s datacenters. However, three of their datacenters recently suffered from a power loss because of a defunct uninterruptible power source and a series of other unfortunate problems – a little over 12,000 servers were without power for a few hours.
However, it seems my vServer’s hardware node was damaged by the power loss; one of the hard disk drives in the RAID array was replaced after the outage. Yesterday, the worst-case scenario came true: besides the hard disks, apparently the motherboard was also damaged causing the RAID controller to slowly corrupt the data on the drives. On Friday, 13th, my provider informed me data had been lost and the server will be swapped with a new machine.
Luckily, I did remember creating backup – and it happened to be a recent one (namely from Thursday, 12th). But as Murphy’s law states, things never work the way you expect them to work. In this case that meant that permissions were incorrect on the backup although I used rsync with the appropriate preserve-permissions option. I’ve thus been busy reinstalling the software, uploading the files and databases and fixing their permission. As of now, all data has been successfully restored (blessing in disguise) and I’m supervising the server’s functions.

]]> Up or Out: employees in IT companies quitting tag:neverpanic.de,2008-04-30:/blog/single/up-or-out-employees-in-it-companies-quitting/#3.58 2008-04-30T19:14:00Z 2008-04-30T19:31:40Z Clemens Lang neverpanic@gmail.com http://www.neverpanic.de/about-me I just read an article in Alex’ Soapbox on IT professionals and their motives to quit a job at a certain company. Having just finished a 6-month-internship at a local new media agency this article came right on time. I don’t want to judge neither the article nor the company I’ve been working at, but the theory mentioned in “Up or Out: Solving the IT turnover crisis” is absolutely worth reading if you haven’t already.
Personally I think Alex Papadimoulis’ findings are a bit too black-and-white (as he admits near the end of the article: “Obviously, this article has painted some incredibly broad strokes, the largest being the stark dichotomy between skilled and unskilled developers, and the lack of distinction between organizations.”), but they are true nonetheless.

]]> The smaller the error the bigger the bug tag:neverpanic.de,2008-04-26:/blog/single/the-smaller-the-error-the-bigger-the-bug/#3.57 2008-04-26T10:05:00Z 2008-05-27T21:35:09Z Clemens Lang neverpanic@gmail.com http://www.neverpanic.de/about-me So we had that navigation tree at work consisting out of two category levels, for simplicity let’s call them Level-1-Category and Level-2-Category. Level-1-Categories could contain other Level-1-Categories and Level-2-Categories, while Level-2-Categories could only contain Level-2-Categories. The navigation was built, caching was implemented, everything seemed fine from a logic viewpoint, however it behaved weird where it would sometimes display the Level-2-Categories in a particular Level-1-Category and sometimes not or in different order.
When we finally found the bug (after hours of debugging) the scales fell off our eyes:
  1. <?php $cacheID = md5($level1Cat->id.$level2Cat->id); ?>

Now imagine what happened when you had a $level1Cat with ID 1 and a $level2Cat with ID 12, that would write it’s cache to md5(‘112’); - and trying to open a $level1Cat with ID 11 and a $level2Cat with ID 2 it would read the cache md5(‘112’);. Unfortunately these classes did have the same interface, so no errors were thrown.
Changing the code to 
  1. <?php $cacheID = md5($level1Cat->id.'-'.$level2Cat->id); ?>
resolved the bug and finally fired the closing time-event for us.

]]> Back to Google tag:neverpanic.de,2008-02-05:/blog/single/back-to-google/#3.54 2008-02-05T22:45:01Z 2008-02-11T22:28:14Z Clemens Lang neverpanic@gmail.com http://www.neverpanic.de/about-me Since I switched back to my domain neverpanic.de, which I lost about a year ago to a domain grabber (you can check out archive.org for my site), I’ve been waiting for Google to start indexing my site again. Unfortunately, it seemed I was out of luck - even half a year after domain registration I still didn’t have any pages in the Google index.
I recently discovered a possibility to have your site reissued if you think it has been banned from the index: Google offers a request reconsideration form in their Google Webmaster Tools service. Five days after I sent in the request with an explanation what happened to the domain before it seems Google is starting to list my site again.
Evidence is quite obvious… here are two graphs from Google Webmaster Tools, the first one showing the number of pages crawled daily and the second one the amount of crawled data in KB
Google Webmaster Tool graphs showing a steep rise of crawled pages

]]> Keeping yourself out of your Google Analytics statistics tag:neverpanic.de,2008-01-31:/blog/single/keeping-yourself-out-of-your-google-analytics-statistics/#3.51 2008-01-31T20:54:22Z 2009-06-27T21:28:23Z Clemens Lang neverpanic@gmail.com http://www.neverpanic.de/about-me Based on Count me out on Analytics Talk I’m keeping myself out of my sites’ statistics. However Google released a new version of their tracking JavaScript in December and they’re no longer adding new features to the old urchin.js. So updating is a god idea, but I still want to keep my hits out of my site statistics.

A quick glance at the Google Analytics help center told me there was a way to set custom variables in the new JavaScript, too, so I modified my keep-me-out files:

  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>removing you from GoogleAnalytics...</title>
  5. <script type="text/javascript">
  6. 	var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  7. 	document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
  9. <script type="text/javascript">
  10. 	var pageTracker = _gat._getTracker("UA-XXXXXXX-X");
  11. 	pageTracker._initData();
  12. 	pageTracker._trackPageview();
  14. <script type="text/javascript">
  15. function setSegment(next) {
  16. 	pageTracker._setVar('someSpecialTextYoullUseInACustomFilterInGoogleAnalytics');
  17. 	if (next.length > 0) {
  18. 		document.location.href =  next;
  19. 	} else {
  20. 		window.close();
  21. 	}
  22. }
  24. </head>
  25. <body onload="setSegment('http://location.of/the.same.script.on.another.site.of.yours.to.redirect')">
  26. </body>
  27. </html>

So what is this doing? First, it loads the Google Analytics JavaScript (lines 5-8), then it initializes the tracking (lines 9-13) and last but not least the function (lines 14-23) that sets the custom value in the tracking class and redirects if you passed another URL to it (useful for chaining all your sites). Finally in line 25, the function gets called on page load.
Combined with “dom.allow_scripts_to_close_windows” in Firefox’ about:config you can add this page as a new start page tab and have it exclude you automagically every time you press the home button (and the window closes automatically after this, which keeps your tab bar clean).

]]> GeSHify: a GeSHi syntax highlighting extension for Expression Engine tag:neverpanic.de,2008-01-30:/blog/single/geshify-a-geshi-syntax-highlighting-extension-for-expression-engine/#3.50 2008-01-30T19:51:51Z 2009-05-19T18:53:52Z Clemens Lang neverpanic@gmail.com http://www.neverpanic.de/about-me Update: GeSHify has moved! Visit it's new home http://geshify.com/. This page is probably outdated!



So I figured out it would end as it always does (notice how I exaggerate here to keep the pathos of the text) - I had to do it my way. And here it is: GeSHify for Expression Engine.
GeSHify supports the following features:



  • Customizable intelligent caching (this one is very important, since GeSHi is not the fastest code highlighter out there)

  • Supports GeSHi 1.0 and GeSHi 1.1 (currently alpha) - and you can even switch between both using some clicks in the control panel

  • Customizable tag (in case you want to keep the original functionality of [ code ] instead of overwriting it, which is the default setting)

  • HTML-argument-style settings: you can pass something like lang=actionscript to the code tag

  • Default settings manageable using the control panel, so you don't have to pass all arguments each time you're pasting code



Want to see an example? Sure, no problem:
  1. <?php
  2. function activate_extension()
  3. {
  4.  global $DB;
  5.  $DB->query($DB->insert_string('exp_extensions',
  7.    'extension_id' => '',
  8.    'class' => 'Geshify',
  9.    'method' => 'pre_typography',
  10.    'hook' => 'typography_parse_type_start',
  11.    'settings' => serialize($this->settings_default),
  12.    'priority' => 8,
  13.    'version' => $DB->escape_str($this->version),
  14.    'enabled' => 'y'
  15.   )
  16.  ));
  17.  $DB->query($DB->insert_string('exp_extensions',
  19.    'extension_id' => '',
  20.    'class' => 'Geshify',
  21.    'method' => 'post_typography',
  22.    'hook' => 'typography_parse_type_end',
  23.    'settings' => serialize($this->settings_default),
  24.    'priority' => 8,
  25.    'version' => $DB->escape_str($this->version),
  26.    'enabled' => 'y'
  27.   )
  28.  ));
  29. }
  30. ?>

If you know PHP and the Expression Engine API you might notice this is the place where the extension hooks into Expression Engine. If you don't you probably don't care either wink

Read on for Documentation and Download

Documentation

Please give me some feedback, whether you want me to include the original GeSHi package in the download and release a new version of GeSHify whenever GeSHi is updated or if you want to download GeSHi yourself, generating less updates to GeSHify where no GeSHify code actually changed.

This documentation expects your GeSHify tag name setting to be “code” and your delimiters to be “[” and “]”, which is the default. If you feel a need to do so, you can change these settings in your control panel by going to Admin » Utilities » Extensions Manager » GeSHify, where you will be provided a fancy settings manager.

code-tag syntax

To parse code with GeSHify, you need to wrap it in [code] and [/code]. You can optionally pass the following arguments

  • lang
    lang=[identifier of the GeSHi language file you want to use for parsing this code block]
    Default value can be changed in the control panel. Check the GeSHi website for possible values - note that these values might differ from GeSHi 1.0 to GeSHi 1.1 even for the same code-language
    Example: [code lang=php]<?php // some php code ?>[/code]
  • line
    line=[none|fancy99|normal]
    type of line numbering to use. Possible values are “none” for no line numbers, “normal” for standard line numbers and “fancy” followed by a number where each numberth line will be highlighted in a different color. The default value can be changed in the control panel.
    Example: [code line=none][/code] for no line numbers, [code line=fancy5][/code] for each 5th line number in a different color and [code line=normal][/code] for standard line numbers.
  • start
    start=[number]
    first line number to be used
    Example: [code start=5][/code] will start line numbering at 5; very useful, if you're trying to split a file in multiple parts, but still have consistent line numbers.
  • strict
    strict=[true|false|1|0]
    whether to use strict mode, where you'll have to include the start and end tag in interpreted languages like e.g. PHP. Defaults to false on GeSHi 1.0 and true on GeSHi 1.1.
    Example: [code strict=true][/code] or [code strict=1][/code] for strict handling, [code strict=false][/code] or [code start=0][/code] for non-strict handling.
  • keyword_links
    keyword_links=[true|false|1|0]
    whether to link special keywords with online documentation for the language used (e.g. PHP keywords will be linked to php.net when this is enabled). Default value can be changed in the control panel.
    Example: [code keyword_links=true][/code] or [code keyword_links=1][/code] for linked keywords, [code keyword_links=0] or [code keyword_links=false] to disable keyword links.
  • overall_id
    overall_id=[id string to use in the id attribute of the code container]
    ID attribute to assign to the HTML element containing the source code after hightlighting. You can use this to apply custom CSS or JavaScript.
    Example: [code overall_id=heapsort_in_php][/code]
  • overall_class
    overall_class=[class name to add to the class attribute of the code container]
    class name to add to the class list of the HTML element containing the source code after highlighting. You can use this to apply custom CSS or JavaScript.
    Example: [code overall_class=sorting_algorithms_in_php][/code]

Caching

GeSHify will cache your highlighted source code until it is being modified or until there hasn't been any hit on the page containing it for 24h (you can change that value using the control panel). GeSHify will clear old cache files based on a 10% chance with each hit (random number generators ftw!). If you'd like to clear your cache manually delete the contents of your system/cache/geshify_cache directory (if you changed the cache directory setting in the GeSHify extension settings this directory will be located somewhere else)

License

GeSHify is released under the GPL.

Bugs and known limitations

Please report any bugs you encounter or and features you'd like to see by commenting on this post or by mailing to neverpanic@gmail.com

GeSHi 1.1 is alpha software - many code libraries are missing and neither line numbering nor disabling strict mode work with GeSHi 1.1 yet.

Download & Changelog

GeSHify has a new home at geshify.com. Please get it from there. ]]> Forms with WuFoo tag:neverpanic.de,2007-12-20:/blog/single/forms-with-wufoo/#3.49 2007-12-20T20:08:16Z 2009-06-27T21:32:17Z Clemens Lang neverpanic@gmail.com http://www.neverpanic.de/about-me I've been listening to Technikwürze Podcast, Episode 104 (a german podcast about design and webstandards) and they've been talking about WuFoo, an online service to create HTML forms. You can create forms using drag and drop on their site. If you want their server side validation, their statistics and their database power, you can purchase a paid subscription plan, but what I want to point out today is their XHTML/CSS export feature.

When you create a form, click the code-button and choose “XHTML/CSS code only” on the right they'll serve you the correct XHTML and CSS code for the form you designed ready somewhat ready to include it into your web site. I moved all their CSS rules into some kind of “namespace” so they wouldn't interfere with my site's CSS rules (particularly my CSS files require the form to be in an element with class “wf” assigned to it and the IDs being used in the form are prefixed with “wf_”). I added some jQuery JavaScript for the cool eye candy-effects and that's it. Now I can easily insert WuFoo-generated forms in my site (and oh boy, I will).

Note that you will have to take care of form validation yourself - you're not using the WuFoo guys' servers and I didn't include client-side validation in my JavaScript.

If you'd like to use my modified CSS file and my jQuery JavaScript code scroll down for a highlighted version or get it here: CSS and jQuery JavaScript. The CSS and XHTML code has been released under a CreativeCommons Attribution 2.5 license and I'm hereby releasing the jQuery code under the same license.

  1.  
  2. /* - - - - - - - - - - - - - - - - - - - - -
  3. Title : Wufoo Form Structure
  4. Author : Infinity Box Inc.
  5. URL : http://wufoo.com
  6. Last Updated : September 30, 2007
  7. - - - - - - - - - - - - - - - - - - - - - */
  8. .wf {
  9. 	margin:7px 0 15px 0;
  10. 	text-align:center;
  11. 	font-size:small;
  12. 	background:#fff3e8;
  13. 	font-family:Verdana,Geneva,Helvetica,sans-serif;}
  14. .wf #wf_container {
  15. 	text-align:left;
  16. 	background:#fff3e8;}
  17. .wf #wf_container, .wf #wf_top, .wf #wf_bottom, .wf #wf_footer {
  18. 	margin:0 auto;
  19. 	width:90%;
  20. }
  21. .wf #wf_top, .wf #wf_bottom {
  22. 	width:90%;
  23. 	height:10px !important;
  24. 	display:block !important;
  25. }
  26. .wf #wf_top {margin-top:10px;}
  27. .wf form.wufoo {
  28. 	margin:20px auto 0 auto;
  29. 	padding:0 0 20px 0;
  30. }
  31. /* ----- LOGO ----- */
  32. .wf h1 {
  33. 	margin:0;
  34. 	padding:0;
  35. 	min-height:0;
  36. 	background-color:#dedede;
  37. 	text-indent:-9000px;
  38. 	text-decoration:none;
  39. }
  40. .wf h1 a {
  41. 	height:100%;
  42. 	min-height:40px;
  43. 	display:block;
  44. 	/*background:url(/images/wflogo.png) no-repeat left top;*/
  45. 	overflow:hidden;
  46. }
  47. * html .wf h1 a {
  48. 	background-image: none;
  49. 	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/wflogo.png", sizingMethod="crop");
  50. }
  51. .wf img {
  52. 	/*behavior: url(/images/iepngfix.htc);*/
  53. 	border:none;
  54. }
  55. .wf .hide {
  56. 	display:none !important;
  57. }
  58. /* - - - - - - - - - - - - - - - - - - - - -
  59. Title : Wufoo Form Foundation
  60. Author : Infinity Box Inc.
  61. URL : http://wufoo.com
  62. Last Updated : November 13, 2007
  63. - - - - - - - - - - - - - - - - - - - - - */
  64. .wf .wufoo {font-family:Verdana,Geneva,Helvetica,sans-serif;
  65. 	font-size:small;
  66. }
  67. .wf .wufoo li {width:62%;}
  68. .wf form ul {
  69. 	margin:0;
  70. 	padding:0;
  71. 	list-style-type:none;
  72. 	width:100%;
  73. 	font-size:100%;
  74. }
  75. .wf form li {
  76. 	margin:0;
  77. 	padding:4px 5px 2px 9px;
  78. 	position:relative;
  79. 	clear:both;
  80. }
  81. .wf form li.focused label {
  82. 	color: #fff3e8;}
  83. .wf form input.focused,
  84. .wf form textarea.focused,
  85. .wf form select.focused {
  86. 	border-color: #f00;}
  87. .wf form li:after, .wf .buttons:after {
  88. 	content:"."; 
  89. 	display:block;
  90. 	height:0; 
  91. 	clear:both; 
  92. 	visibility:hidden;
  93. }
  94. .wf form li, .wf .buttons {
  95. 	display: inline-block;
  96. }
  97.  
  98. * html .wf form li, * html .wf .buttons {
  99. 	height: 1%;
  100. }
  101. .wf form li, .wf .buttons {
  102. 	display: block;
  103. }
  104. * html .wf form li div {display:inline-block;}
  105. .wf form li div, .wf form li span {
  106. 	margin:0 4px 0 0;
  107. 	padding:0 0 8px 0;
  108. 	color:#444;
  109. }
  110. .wf form li span {float:left;}
  111. .wf form li div.address {padding-bottom:0;}
  112. .wf form li div.left {
  113. 	display:inline;
  114. 	float:left;
  115. 	width:47%;
  116. }
  117. .wf form li div.right {
  118. 	display:inline;
  119. 	float:right;
  120. 	width:47%;
  121. }
  122. .wf .clear {
  123. 	clear:both !important;
  124. }
  125. /* ----- INFO ----- */
  126. .wf .info {
  127. 	display:inline-block; 
  128. 	clear:both;
  129. 	border-bottom:1px dotted #ccc;
  130. 	margin:0 0 1em 0;
  131. }
  132. .wf .info[class] {display:block;}
  133. .wf .info h2 {
  134. 	font-weight:normal;
  135. 	font-size:160%;
  136. 	margin:0 0 3px 0;
  137. 	clear:left;
  138. }
  139. .wf .info p {
  140. 	font-size:95%;
  141. 	line-height:135%;
  142. 	margin:0 0 12px 0;
  143. }
  144. /* ----- SECTIONS ----- */
  145. .wf form hr {display:none;}
  146. .wf form li.section {
  147. 	border-top:1px dotted #ccc;
  148. 	margin-top:9px;
  149. 	padding-top:13px;
  150. 	padding-bottom:0px;
  151. 	padding-left:9px;
  152. 	width:97% !important;
  153. }
  154. .wf form ul li.first {
  155. 	border-top:none !important;
  156. 	margin-top:0px !important;
  157. 	padding-top:0px !important;
  158. }
  159. .wf form .section h3 {
  160. 	font-weight:normal;
  161. 	font-size:110%;
  162. 	line-height:135%;
  163. 	margin:0 0 2px 0;
  164. }
  165. .wf form .section p {
  166. 	font-size:85%;
  167. 	margin:0 0 10px 0;
  168. }
  169. /* ----- FIELDS AND LABELS ----- */
  170. .wf label.desc {
  171. 	line-height:150%;
  172. 	padding:0 0 1px 0;
  173. 	border:none;
  174. 	color:#222;
  175. 	display:block;
  176. 	font-size:95%;
  177. 	font-weight:bold;
  178. }
  179. .wf label.choice {
  180. 	font-size:100%;
  181. 	display:block;
  182. 	line-height:1.4em;
  183. 	margin:-1.55em 0 0 25px;
  184. 	padding:4px 0 5px 0;
  185. 	color:#222;
  186. 	width:90%;
  187. }
  188. .wf form li div label, .wf form li span label {
  189. 	margin:0;
  190. 	padding-top:3px;
  191. 	clear:both;
  192. 	font-size:9px;
  193. 	line-height:9px;
  194. 	color:#444;
  195. 	display:block;
  196. }
  197. .wf input.text, .wf input.file, .wf textarea.textarea, .wf select.select {
  198. 	margin:0;
  199. 	font-size:100%;
  200. 	color:#333;
  201. }
  202. .wf input.text, .wf textarea.textarea, .wf .firefox select.select {
  203. 	border-top:1px solid #7c7c7c;
  204. 	border-left:1px solid #c3c3c3;
  205. 	border-right:1px solid #c3c3c3;
  206. 	border-bottom:1px solid #ddd;
  207. 	background:#fff3e8;
  208. 	/*url(/images/fieldbg.gif) repeat-x top*/;
  209. }
  210. .wf input.text, .wf input.file {
  211. 	padding:2px 0 2px 0;
  212. }
  213. .wf input.currency {text-align:right;}
  214. .wf input.checkbox, .wf input.radio {
  215. 	display:block;
  216. 	line-height:1.4em;
  217. 	margin:6px 0 0 3px;
  218. 	width:13px;
  219. 	height:13px;
  220. }
  221. .wf textarea.textarea {font-family:Verdana,Geneva,Helvetica,sans-serif;}
  222. .wf select.select {font-family:Verdana,Geneva,Helvetica,sans-serif;
  223. 	margin:1px 0;
  224. 	padding:1px 0 0 0;
  225. }
  226. .wf select.select[class] {
  227. 	margin:0;
  228. 	padding:1px 0 1px 0;
  229. }
  230. *:first-child+html .wf select.select[class] {
  231. 	margin:1px 0;
  232. }
  233. .wf .safari select.select {
  234. 	margin-bottom:1px;
  235. 	font-size:120% !important;
  236. }
  237. .wf span.symbol {
  238. 	font-size:115%;
  239. 	line-height:130%;
  240. }
  241. .wf form li .datepicker {
  242. 	float:left;
  243. 	margin:.1em 5px 0 0;
  244. 	padding:0;
  245. 	width: 16px;
  246. 	height: 16px;
  247. 	cursor:pointer !important;
  248. }
  249. /* ----- BUTTONS ----- */
  250. .wf input.btTxt {
  251. 	padding:0 7px;
  252. 	width:auto;
  253. 	overflow:visible;
  254. }
  255. .wf .buttons {
  256. 	clear:both;
  257. 	margin-top:10px;
  258. }
  259. .wf .buttons input {
  260. 	font-size:120%;
  261. 	margin-right: 5px;
  262. }
  263. /* ----- TEXT DIRECTION ----- */
  264. .wf .rtl .info h2,
  265. .wf .rtl .info p,
  266. .wf .rtl label.desc,
  267. .wf .rtl label.choice,
  268. .wf .rtl div label,
  269. .wf .rtl span label,
  270. .wf .rtl input.text,
  271. .wf .rtl textarea.textarea,
  272. .wf .rtl select.select,
  273. .wf .rtl p.instruct,
  274. .wf .rtl .section h3,
  275. .wf .rtl .section p,
  276. .wf .rtl input.btTxt {direction:rtl;}
  277. /* ----- SIZES ----- */
  278. .wf .third {
  279. 	width:32% !important;
  280. }
  281. .wf .half {
  282. 	width:48% !important;
  283. }
  284. .wf .full {
  285. 	width:100% !important;
  286. }
  287. .wf input.small, .wf select.small {width:25%;}
  288. .wf input.medium, .wf select.medium {width:50%;}
  289. .wf input.large, .wf select.large, .wf textarea.textarea {width:100%;}
  290. .wf textarea.small {height:5.5em;}
  291. .wf textarea.medium {height:10em;}
  292. .wf textarea.large {height:20em;}
  293. /* ----- ERRORS ----- */
  294. .wf #wf_errorLi {
  295. 	width:99%;
  296. 	margin:0 auto;
  297. 	background:#933000;
  298. 	border:1px dotted red;
  299. 	margin-bottom:1em;
  300. 	text-align:center;
  301. 	padding-top:4px;
  302. 	padding-left:0px;
  303. 	padding-right:0px;
  304. }
  305. .wf #wf_errorMsgLbl {
  306. 	margin:7px 0 5px 0;
  307. 	padding:0;
  308. 	font-size:125%;
  309. 	color:#DF0000;
  310. }
  311. .wf #wf_errorMsg {
  312. 	margin:0 0 .8em 0;
  313. 	color:#000;
  314. 	font-size:100%;
  315. }
  316. .wf #wf_errorMsg strong {
  317. 	background-color: #FFDFDF;
  318. 	padding:2px 3px;
  319. 	color:red;
  320. }
  321. .wf form li.error {
  322. 	display:block !important;
  323. 	background-color: #FFDFDF !important;
  324. 	margin:3px 0;
  325. }
  326. .wf form li.error label {
  327. 	color:#DF0000 !important;
  328. }
  329. .wf form p.error {
  330. 	color:red;
  331. 	font-weight:bold;
  332. 	font-size:10px;
  333. 	margin:-2px 0 5px 0;
  334. 	clear:both;
  335. }
  336. .wf .leftLabel p.error, .wf .rightLabel p.error {
  337. 	margin-left:30%;
  338. 	padding-left:15px;
  339. }
  340. .wf .noI .leftLabel p.error, .wf .noI .rightLabel p.error {
  341. 	margin-left:35%;
  342. 	padding-left:15px;
  343. }
  344. /* ----- REQUIRED ----- */
  345. .wf form .req {
  346. 	float:none;
  347. 	color:red !important;
  348. 	font-weight:bold;
  349. 	margin:0;
  350. }
  351. /* ----- INSTRUCTIONS ----- */
  352. .wf form li.focused {
  353. 	background: #351008;
  354. 	color: #fff3e8;}
  355. .wf form .instruct {
  356. 	position:absolute;
  357. 	top:0;
  358. 	left:100%;
  359. 	z-index:1000;
  360. 	width:42%;
  361. 	margin:0 0 0 8px;
  362. 	padding:8px 10px 9px 10px;
  363. 	border:1px solid #e6e6e6;
  364. 	background:#f5f5f5;
  365. 	line-height:130%;
  366. 	font-size:80%;
  367. 	color:#444;
  368. 	visibility:hidden;
  369. }
  370. .wf form .instruct small {font-size:105%;}
  371. .wf form li.focused .instruct, .wf form li:hover .instruct {visibility:visible;}
  372. /* ----- ALT INSTRUCTIONS ----- */
  373. .wf li.altInstruct .instruct,
  374. .wf li.leftHalf .instruct,
  375. .wf li.rightHalf .instruct {
  376. 	visibility:visible;
  377. 	position:static;
  378. 	margin:-2px 0 0 0;
  379. 	padding:0 0 7px 0;
  380. 	background:none;
  381. 	border:none;
  382. 	width:100%;
  383. 	font-size:9px;
  384. 	clear:left;
  385. }
  386. /* ----- LABEL LAYOUT ----- */
  387. .wf .leftLabel li,
  388. .wf .rightLabel li,
  389. .wf li.leftLabel,
  390. .wf li.rightLabel {
  391. 	width:97% !important;
  392. 	padding-top:9px;
  393. }
  394. .wf .leftLabel .small,
  395. .wf .rightLabel .small {width:17%;}
  396. .wf .leftLabel .medium,
  397. .wf .rightLabel .medium {width:35%;}
  398. .wf .leftLabel .large,
  399. .wf .leftLabel textarea.textarea,
  400. .wf .rightLabel .large,
  401. .wf .rightLabel textarea.textarea,
  402. .wf .leftLabel .address,
  403. .wf .rightLabel .address {width:64%;}
  404. * html .wf .leftLabel .small,
  405. * html .wf .rightLabel .small {width:23%;}
  406. * html .wf .leftLabel .medium,
  407. * html .wf .rightLabel .medium {width:55%;}
  408. * html .wf .leftLabel .large,
  409. * html .wf .leftLabel textarea.textarea,
  410. * html .wf .rightLabel .large,
  411. * html .wf .rightLabel textarea.textarea {width:97%;}
  412. .wf .leftLabel label.desc,
  413. .wf .rightLabel label.desc {
  414. 	float:left;
  415. 	width:30%;
  416. 	margin:2px 15px 0 0;
  417. }
  418. .wf .rightLabel label.desc {text-align:right;}
  419. .wf .leftLabel .address,
  420. .wf .rightLabel .address {float:left;}
  421. .wf .leftLabel p.instruct,
  422. .wf .rightLabel p.instruct {
  423. 	width:27%;
  424. 	margin-left:5px;
  425. }
  426. .wf .leftLabel .altInstruct .instruct,
  427. .wf .rightLabel .altInstruct .instruct {
  428. 	margin-left:30% !important;
  429. 	padding-left:15px;
  430. 	width:65%;
  431. }
  432. .wf .leftLabel .buttons,
  433. .wf .rightLabel .buttons {margin-left:15px;}
  434. .wf .leftLabel .buttons input,
  435. .wf .rightLabel .buttons input {margin-left:30%;}
  436. /* ----- NO INSTRUCTIONS ----- */
  437. .wf .noI .instruct {
  438. 	display:none !important;
  439. }
  440. .wf .noI form li,
  441. .wf .noI form li.buttons {
  442. 	width:97% !important;
  443. }
  444. .wf .noI form li.section {
  445. 	padding-left:9px !important;
  446. }
  447. /* ----- NO INSTRUCTIONS LABEL LAYOUT ----- */
  448. .wf .noI .leftLabel .large,
  449. .wf .noI .leftLabel textarea.textarea,
  450. .wf .noI .rightLabel .large,
  451. .wf .noI .rightLabel textarea.textarea,
  452. .wf .noI .leftLabel .address,
  453. .wf .noI .rightLabel .address {width:60%;}
  454. * html .wf .noI .leftLabel .small,
  455. * html .wf .noI .rightLabel .small {width:23%;}
  456. * html .wf .noI .leftLabel .medium,
  457. * html .wf .noI .rightLabel .medium {width:55%;}
  458. * html .wf .noI .leftLabel .large,
  459. * html .wf .noI .leftLabel textarea.textarea,
  460. * html .wf .noI .rightLabel .large,
  461. * html .wf .noI .rightLabel textarea.textarea {width:97%;}
  462. .wf .noI .leftLabel label.desc,
  463. .wf .noI .rightLabel label.desc {width:35%;}
  464. .wf .noI .leftLabel .buttons input,
  465. .wf .noI .rightLabel .buttons input {margin-left:35%;}
  466. /* ----- FIELD FLOATING ----- */
  467. .wf form li.leftHalf,
  468. .wf form li.rightHalf {
  469. 	width:46% !important;
  470. }
  471. .wf li.leftHalf {
  472. 	clear:left;
  473. 	float:left;
  474. }
  475. .wf li.rightHalf {
  476. 	clear:none;
  477. 	float:right;
  478. }
  479. .wf li.leftHalf .medium,
  480. .wf li.rightHalf .medium,
  481. .wf li.leftHalf .small,
  482. .wf li.rightHalf .small {width:100%;}

  1. $(function() {
  2. 	$('.wf input, .wf textarea, .wf select').each(function() {
  3. 		if (this.type != 'submit' && this.type != 'button' && this.type != 'hidden') {
  4. 			$(this).focus(function() {
  5. 				var parent = $(this).parent();
  6. 				while (!$(parent).is('li')) {
  7. 					parent = $(parent).parent();
  8. 				}
  9. 				$(parent).addClass('focused');
  10. 				$(this).addClass('focused');
  11. 			});
  12. 			$(this).blur(function() {
  13. 				var parent = $(this).parent();
  14. 				while(!$(parent).is('li')) {
  15. 					parent = $(parent).parent();
  16. 				}
  17. 				$(parent).removeClass('focused');
  18. 				$(this).removeClass('focused');
  19. 			});
  20. 		};
  21. 	});
  22. });

]]> Why I’m blogging in English tag:neverpanic.de,2007-10-14:/blog/single/why-im-blogging-in-english/#3.39 2007-10-14T18:28:00Z 2007-10-20T17:51:39Z Clemens Lang neverpanic@gmail.com http://www.neverpanic.de/about-me Since my early days in web development, which happened to start at HostingPosts, a free hosting provider, I’ve always been using English when talking about web development related topics. I quickly advanced to a moderator and later an administrator at HostingPosts, for I was trying to give something back to the community by helping other members out, when they had web development-related problems. I practically never talked to my German friends about web development, probably since they were just not interested in that kind of stuff anyway.
When I got my two VPSes at HostEurope I first joined a German discussion board about web topics - HostEurope’s customer board is a great place if you need help, if you have access to it (obviously only if you’re a HostEurope customer) make sure you check it out.

The decision whether to blog in English or German was a tough one, though. It took me almost two months to make the final decision, but I went with English for two main reasons:

  1. I have some English friends, who would probably enjoy reading my blog and they obviously don’t speak German
  2. A lot of people in Germany speak English anyway

Oh, and there’s another reason, too: I’m blogging in English, because I can wink I know my English is not perfect, so you’re welcome to correct spelling mistakes (shame on me for not paying attention to Firefox’ spell check plug-in!) or weird grammar.

]]>