Reinhold Weber

Textmate editor for effective web development (HTML, CSS, PHP) workflow

Like most developers I've used my fair share of IDE's and editors over the years. What stuck was Zend Studio, Eclipse with PDT, PHP Designer and lately Netbeans for PHP.

Somehow, looking back there always was something not quite right and over time really annoying. Right now I've settled with my preferred text editor on the Mac - Textmate. While using a IDE does not make you a good and effective developer, mastering most of them will benefit you in ways you never thought of. I am by nature a lazy bastard, what I really want is an IDe or texteditor for almost eberything I do wih one set of commands to get effective. I do frontend stuff (HTML, CSS, JavaScript, XML) as well as backend stuff (PHP, Python, Ruby) and would like to use one program for all of them, this is where Textmate comes in and sweps all the others far far away

Sometimes it's the little things, searching Google for that damn "lorem ipsum" generator website, just type lorem ⇥ and you get a whole pargraph of pseudo latin sample text, having several lines of text waiting to be turned into an HTML list, just select all the lines and type ⌃ ⇧ command w and Textmate wraps each individual line in paragraph tags, type "li" and everything miraculously converts to an HTML list.

Oh yeah, this is a work in progress and mostly for self-reference.

Backend Programming

PHP Bundle
PHP Code Completion Bundle
phpDoc Bundle
Git Bundle

Frontend Development

Text Bundle
HTML Bundle
CSS Bundle

CMS work

Joomla Bundle
Drupal Bundle
Wordpress bundle
Typo3 Bundle

CSS

⌃ + alt + q compress css
⌃ + q expanded format css
⎋ code completion
⌃ + ⇧ + d duplicate line
⌃ w select word
⌘ ⇧ l select line

Text

ctrl shift k delete current line
ctrl shift j merge current line with next lines
ctrl esc shortcuts overview

HTML

lorem ⇥ generates one paragraph of sample "lorem ipsum" text
⌃ > insert open close tag (type something then apply)
⌃ ⇧ wwrap selection in open close tags
⌃ ⇧ command w wrap each selected line in open close tag
⌃ ⇧ l wrap selected text with link from clipboard
⌃ ⇧ k deletes current line
⌃ ⇧ j merges current line with the next line
⌃ ⇧ t to-do list. this feature scans your project for items labeled with 'FIXME:', 'TODO:', 'CHANGED:' and provides a list of them along with their comments and a link to that file and line.

⌘ + r run ruby/python script
⌘ + ⇧ + r run php script
⌃ w select word
⌘ t go to file
⌘ ⇧ t go to symbol classes, methods ...
⌘ ⇧ f find in project. useful for mass search and replace operations or just finding where a function is defined.
⌘ ⇧ 7 convert any special chars to html entities

PHP

def ⇥ define a constant
req ⇥ require a file
req1 ⇥ require_once
incl ⇥ include a file
incl1 ⇥ include_once
$_ ⇥ Chosse different globals ($_GET, $_POST, $_SESSION, $_SERVER, ...)

Arrays

array ⇥ new array

Control Structures

if ⇥ if conditional statement
ifelse ⇥ if else conditional statement
if? ⇥ if else conditional statement using the ternary operator
switch ⇥ switch conditional statement

OOP

class ⇥ start a class with constructor
fun ⇥ public method
throw ⇥ throw new exception
try ⇥ wrap in try catch block
parent ⇥ insert call to parent

PHPDoc

/** + ⇥ start docblock
doc + ⇥ post-doc
doc_c + ⇥ class
doc_d + ⇥ constant
doc_f + ⇥ function
doc_s + ⇥ function signature

Git Version Control

Version control with Git/Subversion

⌃ ⇧ G Git commands menu
⌃ ⇧ A Subversion commands menu

OOP example with inheritance in PHP, Ruby and Python

Note to self for future reference, I'm learning Python and Ruby this year, this is just a 10 minute comparison I made today and I know I will loose the files somewhere soon.

Without a doubt the Ruby and Python snippets are more aesthetically pleasing to the eye and although they look almost the same for the untrained eye, the approach is fundamentally different.

Example with PHP

class Species {
	private $_type;
	private $_name;
	
	public function __construct($type, $name) {
		$this->_type = $type;
		$this->_name = $name;
	}
	
	public function __get($fieldName) {
		switch ($fieldName) {
	      case "type":
	        return $this->_type;
	      case "name":
	        return $this->_name;
	      default:
	        throw new Exception("Attempted to access invalid property: ".$fieldName);
	    }
	}
}

class Human extends Species
{

	public function getLegs() {
		return 2;
	}
}


$person1 = new Human('Neanderthal', 'Reinhold Weber');
echo $person1->name;
echo ' has '.$person1->getLegs().' legs.';

Example with Ruby

class Species
  attr_accessor :type, :name  
  def initialize(type, name)
    @type = type
    @name = name
  end
end

class Human < Species
  def getLegs
    return 2
  end
end

person1 = Human.new 'Neandethal', 'Reinhold Weber'
print person1.name
print " has #{person1.getLegs} legs."

Example with Python

class Species:
	def __init__(self, type, name):
		self.__type = type
		self.__name = name
	def get_name(self):
		return self.__name

class Human(Species):
	def get_legs(self):
	  return 2
		
person1 = Human("Neanderthal", "Reinhold Weber")
print person1.get_name()
print ' has ' + str(person1.get_legs()) + ' legs.'

Overwrite evil inline styles with external CSS

Note to self for future reference, damn CMS modules.

div[style]{ color: inherit !important; font-size: inherit !important; }

Evolution of a PHP programmer scribble

The following code snippet is from a conversation I had today with an intern describing the different stages of a PHP programmer's evolution as he finds new methods of connecting to a database.

This is very rudamentary and could be expanded using prepared statements, filtering user input etc., but as for now I just wanted to put this up for future reference with the intention to expand it somewhere soon.

I will also add detailed explanations to the various approaches

/* 1 found & copied from somewhere on the internets */
$mysql = mysql_connect('localhost', 'reinhold', 'secret_hash');
mysql_select_db('wordpress') or die("cannot select DB");

/* 1.1 trying the DRY approach */
$db_host = 'localhost';
$db_user = 'reinhold';
$db_password = 'secret_hash';
$db_database = 'wordpress';

$mysql = mysql_connect($db_host, $db_user, $db_password);
mysql_select_db($db_database);

/* 1.2 oh yeah, if the values don't change you can also use constants */
define('DB_HOST', 'localhost');
define('DB_USER', 'reinhold');
define('DB_PASSWORD', 'secret_hash');
define('DB_DATABASE', 'wordpress');

$mysql = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);
mysql_select_db(DB_DATABASE);

/* 1.3 after 3 years of changing the values every time you uplaod something to the live server */
define('LIVE_ENV', true);

if(LIVE_ENV) {
	define('DB_HOST', 'localhost');
	define('DB_USER', 'reinhold');
	define('DB_PASSWORD', 'secret_hash');
	define('DB_DATABASE', 'wordpress');
} else {
	define('DB_HOST', 'testserver.com');
	define('DB_USER', 'reinhold');
	define('DB_PASSWORD', 'secret_hash');
	define('DB_DATABASE', 'wordpress');	
}

$mysql = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);
mysql_select_db(DB_DATABASE);


/* 2  PHP5 procedural approach using the new mysqli extension */
$link = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);

if (!$link) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}

printf("Host information: %s\n", mysqli_get_host_info($link));
mysqli_close($link);

/* 3 PHP5 OOP style baby */
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);

if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}

printf("Host information: %s\n", $mysqli->host_info);

$mysqli->close();

Kick print design's ass - big time

If they give you ruled paper, write the other way. Juan Ramon Jimenez

The pink swirl design was getting old. Time for a redesign. This time I want to try something new and experiment a little bit, first and foremost I wanted to do something to leverage the endless possibilities of publishing on the web. While I redesigned another personal project wich uses randomly generated color schemes last week I thought about expanding on this train of thought. Partly inspired by Jason Santa Maria's custom and interesting "unique design per article" approach which has gained praise from all over the design community, my blog will randomly choose a new unique design each time you will reload the site.

I've always loved simple designs without much fuzz and a general lack of attention to detail, the technique I use the most is setting the mood with a large background image and extracting the colors for the CSS from this image. With this stark approach to webdesign it should be a no-brainer to have at least 1-3 new designs a week which would cumulate to a good hundred designs in the next 12 months - this should keep things fresh for a while.

Surfing through the net I see a lot of new and cool stuff every day where up until now I always wished I could keep cool design parts and snips by making screenshots and collecting them somewhere. That concept didn't really work for me as I never revisited these collections and if I did I didn't quite use them for something. So now woth this new approach whereever I see something cool I can let it inspire me and incorporate what I like into a quick new design and upload it for the world to see. I've been dying to see a few CSS3 features out in the wild, so I will use a lot of experimental stuff which you'll probably won't see anyway too.

Refactoring your CSS styles to comply with the DRY principle

When the DRY principle is applied successfully, a modification of any single element of a system does not change other logically-unrelated elements

Every half-decent PHP, Ruby, Python or Java programmer knows and hopefully uses software design principles to design software, Software design principles and design patterns. While design patterns apply mostly to OOP languages and provide programmers with a general reusable solution to common mostly architectural problems software principles like the aforementioned DRY principle can and should be used on a broader scope.

CSS, in contrary to those mentioned languages is mostly used by designers instead of programmers, hence the lack of formal principles.

I think that being a css developer, you can benefit a lot from knowing certain software principles and incorporating them into your daily workflow and enrich your knowledge and abilities beyond random "best practices" lists.

What is DRY about?

The DRY code philosophy is stated as:

Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

Why should you care?

CSS is per definition and design a complete violation of the DRY principle: Don't Repeat Yourself, in CSS repetition and redundancy are volitionally built in and encouraged from the start. When writing code of any kind one of the most important and fundamental principles of software design is trying to avoid repetition and redundancy. When the same piece of information appears in more than one place it is bound to get out of sync sometime. Changing or fixing something requires you to fix it in ALL instances which, if you have ever coded anything, a major source for future bugs and malfunction.

If you find yourself doing a copy/paste while you're coding, you're likely doing something wrong

Imagine a website with 100.000 visitors/month, assuming you can save only 5kb by DRYing up your css this will result in 5.8Gb less traffic a year.

Programming languages like PHP, Ruby, Python or Java provide a wide array of mechanisms to avoid code repetitions - variables, constants, classes, methods, functions, control structures - good luck emulating those in CSS.

How do I keep my stylesheets DRY?

These are a few random guidelines I use to keep my CSS DRY

Rely on inheritance, don't redeclare inherited values, don't overspecify, let it flow down the document tree - try setting important XHTML selectors like font and a for your entire site ONCE at the very top of your style sheet and letting them flow through the whole siteW3C Reference on Inheritance
Don't declare default (called "initial" in the specification) values.
Group selectors with the same declarations and declarations with the same selectors.
Browser hacks always bring redundancy, try to avoid as much as possible.
Define everything as globally (as high up the document tree) as possible, assign your classes and IDs at the highest level possible
You can assign multiple class names to a given element
Reduce redundancy by using shorthand declarations - Sitepoint CSS Reference
Use descendant selectors to get specific without class or id selectors. Learn about all the CSS3 selectors, it's almost like XPath :-) - Selectors Level 3
If you don't/can't use php for variables you can maintain a color scheme reference, change colors with "search & replace"
Learn to exploit the cascading nature of CSS - W3C Reference on Cascading
Learn about CSS Specificity and how you can calculate the weight of your selectors, this is usually the reason why your CSS-rules don't apply to some elements, although you think they should have. Generally try to avoid inline styles.
You can change capitalisation using CSS
Emulate css variables with php - Generating Dynamic CSS with PHP by Douglas Clifton
Use a css preprocessor to nest css rules within each other
Favor built-in HTML elements before using divs and spans - HTML5 elements
Nest css blocks - for details see this article by Matthias Miller

While there is a recommendation for css variables by Daniel Glazman and David Hyatt of Apple, Inc. until this will be available to use in the real world years will pass by. Fortunately there is a way to use all that cool stuff right here right now - with the help of php, ruby and/or css preprocessors

CSS preprocessors - PHP/Ruby

There are a lot of very good css preprocessors out there which can assist you in DRYing up your css workflow.

Allain Lallonde's excellent php snippet which besides allowing you to nest CSS rules within each other gives you the ability to use // for comments.
CSS Cacheer a CSS server-side pre-processsor written in PHP by Shaun Inman.
css_dryer, a Ruby script by Andrew Stuart, which not only allows you to use nested declarations and css variables but also implements caching.
Also for Ruby is SASS (Syntactically Awesome StyleSheets), a meta-language on top of CSS that's used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.

Beware of DRYitis

Aside from the fact that DRYitis is not a real word and I totally made that up after a little while you feel inclined to DRY up everything.

Besides all the benefits of a DRY approach one word of caution should be mentioned nevertheless. Adhering to DRY, the potential for taking it too far and sacrificing maintainability is not far away. Sometimes it just makes sense to keep seemingly identical things separated for the sake of maintainability. It might not be a bad idea to put a comment in the code to let future maintainers know that there's similar code elsewhere that they should fix.

The 48 hour CMS experiment

This is the plan: 48 hours in April, one web developer and several bottles of wine - what hopefully comes out is something new and exciting. Requirements are done, waiting for a good wine :-)

"The good thing about reinventing the wheel is that you can get a round one." Douglas Crockford's response about JSON as reinventing XML's wheel.

In the last year I've been working with a lot of Open Source CMS, from creating templates/themes to extending standard functionality with custom built modules and plugins, it has been a wild ride with short deadlines and steep learning curves.

I have had the pleasure & pain to work with most of the trendy cms greats, from the swiss army knife that is Drupal to the horrific mess that comes with Typo3.

All have something unique and sometimes disturbing, their own agenda & strong opinions and philosophies that inevitably come with every open source project. As the months went on and the projects got more demanding I found myself extending, changing, overwriting and most of all cursing.

So now I have my own way of doing things and wanting things and keep changing the standard stuff to adapt to my needs instead of the other way around.

While it has been quite over here, partly due to the book I'm trying to write this 100% custom coded from scratch cms will hopefully be one of the highlights of my year.

My CMS borrows features heavily from the industry leaders like Drupal and WordPress, but also has some unique features, first and foremost a 100% "NO JavaScript/Ajax Crap" policy.

Due to the somewhat limited timeframe it also lacks a lot of things like for example ACLs, the scope of the project is however small websites which won't need granular access control anyway.

I'll keep you posted...

My new php IDE of choice with a new milestone release

Get it while it's hot

It's free as in beer and better than ever - NetBeans IDE 6.7 M2

CSS PHP Country Codes of the World Visualisation

Another of my data visualisation experiments with PHP and CSS. Inspired by this poster from historyshots.com.

List with worldwide country codes for MySQL available from 27.org

View the live example at http://reinholdweber.com/get_countries_map.php

Hover with your mouse over the ISO codes to see the CSS effect and view the full country name. Almost everything in this visualisation is generated randomly - the size of the ISO codes, the placement on the screen and the individual colors. Refresh to see the "randomness".

Excerpt from the source file - for the HTML stuff see the Live Demo, what I left out here is the database connection.

<?php
function get_countries() {
	$query  = 'SELECT iso, name FROM country_codes';
	$result = mysql_query($query) OR die(mysql_error());
	
	$items = array();
	while($row = mysql_fetch_object($result)) {
		$countries[] = $row;
	}
	return $countries;
}

function display_map($countries) {
	echo '<ul>';
	foreach($countries as $country) {
		$left = rand(5,90);
		$top = rand(5,90);
		$color = dechex(rand(0,16777215)); // 167777215 is the decimal equivalent to to the hexidecimal ffffff
		$size = random_float(0.6, 2.5);

		echo '<span class="c" style="left:'.$left.'%; top:'.$top.'%; color: #'.$color.'; font-size: '.$size.'em">'.$country->iso.' <span class="name">'.$country->name.'</span></span>'."\n";

	}	
	echo '</ul>';
}

function random_float ($min,$max) {
   return ($min+lcg_value()*(abs($max-$min)));
}

?>

<style type="text/css">
body {background: #fff; font: 70% times, georgia, serif;}
.c {position: absolute;}

span span.name {display: none}
span:hover span.name {display: block; font-size: 40px;}
</style>

<?php
$countries = get_countries();
display_map($countries);
?>

CSS deployment revisited - php snippet to combine all css files in a given folder

As a follow-up to my first post on css deployment here is a handy script which reads a directory with css files and combines them automatically into one master stylesheet. No matter how many files you add while developing, before launch you can use a build script that merges them all so you can save HTTP requests.

This is just the snippet who combines the files, if you want to (and you definitely should) compress your styles, strip out all of the comments and whitespace etc. please refer to my first article on css deployment with a php snippet which lets you compress your styles on the fly

All you have to do is change the path to the folder all your css files are located in.

<?php
header('Content-type: text/css');

$path_to_css = '../assets/css';

function get_files($dir = '.', $sort = 0) {
	$files = scandir($dir, $sort);
	$files = array_diff($files, array('.', '..'));
	return $files;
}

$files = get_files($path_to_css, 1);
	
	foreach($files as $file) {
		include_once($path_to_css.'/'.$file);
	}
?>