E-com DevBlog Spider-ball-vacuum

1Feb/121

LESS is more

LESS logo

LESS - The dynamic Stylesheet lanugage

I've seen it, I've ignored it, and now it's time to embrace and post about it.  If you haven't already given it the time of day, it's time to crawl out from under the rock and start learning LESS.

LESS bills itself as "The Dynamic Stylesheet language", and even for a self-billing, it is dead-on.  LESS allows the use of variables, mixins, a nested rule system, and the use of functions within your CSS.  All of this is processed through some black JavaScript magic, so you don't need to worry about possible performance kills in your vanilla stylesheet.

LESS isn't just for client-side operations either, it can be integrated with both Node.js and Rhino.

Who is using LESS? Fair enough question, many sites are using LESS right now but perhaps you should check out the Twitter Bootstrap that is built using LESS.

I could give you quite a few examples here to really get you salivating, but I find that when someone has already done the work, I may as well have you go there. So to get your hands dirty and start using LESS, just hit up the official site.

Print This Post Print This Post
Filed under: Web Development 1 Comment
12Sep/110

Awesome IE Tool

I had to get another post in before the 6 month mark. And it just so happens I ran into this awesome tool that is quite handy in terms of testing code in multiple versions of Internet Explorer. In the past I've always used the IEDeveloper toolbar (or Spoons browser sandbox before M$ got all copyrighty on them and made them remove it) and it's fairly adequate in allowing me to test the various versions of IE. However there have been times It's missed the mark or in one case wouldn't work at all with the portal I was trying to log into (IE6) So when I ran into this little beauty I was instantly captivated (as captivated as one can be when doing anything that has anything to do with IE). Behold the Internet Explorer Collection.
Maybe I'm just behind the times but this is amazing. Multiple standalone installs of different versions of IE. You can even install really really old versions like 1.x (I didn't but you can). I installed IE6, IE7 and IE8, I don't run windows 7 either at home or work so I can't install IE9.
To be fair I'm still in the test drive phase and haven't removed my IETester install yet but so far it's looking good. The only complaint I have is IE Developer Toolbar is only available in IE8, and while Developer Toolbar is not exactly firebug (but, it has gotten better with IE8) it's about all you have when troubleshooting an IE specific issue.
Before downloading read the comments on the download site. I mention it because they seem to be about 50/50 good vs bad. The software works for me so far on Windows XP Pro SP3, if anything changes I'll update this post.

Print This Post Print This Post
30Aug/110

A few grid systems to keep an eye on

I've been attempting to look into the future and what I've found is that you can either code static and pray that your code fits the spec of your end-user, or you can attempt to throw media-queries at everything and hope you had enough to make the design stick.

So where does that leave grids? Grids let us throw a design up and make it look pretty and proportioned. That isn't to say that your design will still look fantastic on someone's imported-Nokia as it did on your cinema display when you pounded the design out, but using a good grid system can help ease the pain of making things a little more responsive and a lot less "borked".

Here are three grid systems worth taking a look at:

  • Simple Grid - Simple grid takes after it's namesake, it is a system focused on simplicity and keeping everything elegantly small. While I haven't created a project with this yet, I'm feeling like my weekend is going to be spent playing with this.
  • Golden Grid - Ever heard of the Golden Ratio? This grid system is based on that principle and claims to handle almost any screen (from 240px to 2560px wide).
  • 1140px CSS Grid System (1140gs) - The ever popular 1140px grid system. Since 1140px is the new hotness for design, we are finally starting to break the shackles of 1024x768 users. However that isn't entirely true, we still have to plan ahead for mobile devices. This is what makes 1140gs so brilliant. It handles the media-queries for you and can handle switching your design out for a much smaller screen. I've used this one on a few projects and while it does take a design shift the results have been worth it.

No that's not anywhere near the entire list of grid systems, but they are the ones that I find to be the most exciting (this month). And I've even used the 1140gs on a few projects (that were met with success). This list should at least get you started. If you do anything cool with any of these (or even some other grid system), drop a link in the comments so we can all see your handiwork.

Print This Post Print This Post
17Jun/110

CronMaker, your cron problems are over

I found a new tool and I am on blog posting kick so I thought I would share with everyone.  The tool is http://www.cronmaker.com/ and it helps with making cron expressions for use with quartz scheduling.  Now don't get me wrong the quartz is well documented and it is easy to build the expressions, but I always have to go look it up anyway.  This saves me a step.  Put in when you want it to run and bam! there is your expression. Don't forget to hit with your spice weasel.

Print This Post Print This Post
14Jun/110

Initializr a quick Html 5 site template

I was playing with eclipse orion today and it suggested using Initializr to start a page. Although I still don't have orion working I want to comment on Initializer.
It's awesome. It's easy. It's great if you just want something fast. Check it out. http://initializr.com/

Print This Post Print This Post
2Mar/110

Handy PHP Debugging Tools

I'm sure most folks who read this blog are already set in their ways of debugging things. And many probably already have a few custom built methods they use to look at raw data on the fly. However for those few who might be in need or are possibly looking for another approach this post is for you ;-) .

I used to rely solely on a step through debugger to help me debug code, and don't get me wrong stepping through code is a great way to see what the heck is going on (especially in code you are unfamiliar with and was written by monkeys), however for the last year or so I've been learning new techniques and tricks for getting my raw data visible without having to step through the code.

My all time favorite method is

echo "<pre>".print_r($array, true)."<pre>";

but there are times that is not good enough. like when you are trying to see data run in shell_exec() or when the page changes before you can see the echo. So to combat this I've written a method that drills through an array or an object and spits the data out in a file in a format similar to the aforementioned. I call it pre()

observe

function pre($array, $mode = 'w', $indent = "\r\n") {
	if(is_array($array) || is_object($array)) {
		$filename = 'C:\logs\dnate_pre.log';
		$handle = fopen($filename, $mode);
		fwrite($handle, getArrayKeysAndValues($array, $indent));
		fclose($handle);
	} else {
		writeToFile($array, $indent);
	}
}

and if you're wondering what the getArrayKeysAndValues() method does, here it is.

function getArrayKeysAndValues($array, $indent = "\r\n\t") {
        $txt = '';
	if( is_object($array) ) {
		$array = get_object_vars($array);
	}
	if(is_array($array)) {
		$txt .= " => Array (";
		foreach($array as $k => $v) {
			$txt .= $indent."\t[".$k."]";
			if( is_array($v) || is_object($v) ) {
				$txt .= getArrayKeysAndValues($v, $indent."\t");
			} else {
				$txt .= " => ".$v;
			}
		}
		$txt .= $indent.")";
	}
	return $txt;
}

Occasionally I've run into a limit of how many times getArrayKeysAndValues() can call itself (100) so in cases like that I've also got a method I call kill() that kills the script and spits the output out on the browser. Not very subtle but gets the job done.

Obviously you'll have to have the log files in the proper directory on your machine. Then just include the file and call the desired method.

The rest are in the download, feel free to offer suggestions or comments.

Debug Tools

Print This Post Print This Post
Tagged as: , No Comments
31Jan/111

Online IDEs (work in a browser)

So as previously mentioned I have a cr48, is it awesome? absolutely, do I use it? not so much. Why don't I use it very much? It is a slightly complicated story.  You see I had an HP mini 311 for my netbook, and what I have found out is that the 311 was not a netbook. Sadly it turns out I did many things with the 311 that I can no longer do with an actual netbook. To make it worse, it turns out that the things I do on a netbook are the same things I do on my phone (Samsung Galaxy S - Epic).

So what does that have to do with Online IDEs? Everything. I have to code, I don't know why, but I have this compulsive obsession with coding. It doesn't even matter what, it can be php, java, html, js, actionscript, whatever, as long as it can be thrown together and I can get it to compile, I have inner peace.

So back to the cr48, just because it can't code out of the box doesn't mean you can't code on it.  I stumbled onto a few IDEs today that are online and can do some simple compiling.  While it's true that they most cannot actual compile and render code for your playback use on the cr48, but they can save projects, upload via ftp, and even open in different IDEs.

CodeRun IDE - This is a great little browser-based IDE.  Sign up is free and it will store your projects online for you.  It does have a simple debugging tool, and even comes with some code-stubs to get your started (c#, php, and some js libs). Overal the look and feel is good and it fits the screen rather well. My only complaint is the that password on your account is seriously weak-sauce. I mean no special characters? For-the-love-of-whatever-gimped-db-the-backend-is-using why!? But do not let that stop you from trying it out.

Kodingen - This is an interesting little web-mash. You can grab a free account, set it to connect to your own FTP, and even get Shell access to your files. It is in beta so don't expect too much out of the box, that being said, this is a very nice offering. The site is clean and offers editing in multiple other online IDEs (Bespin, Codemirror, Ymacs), it also has a great control panel that lets you see your projects and manage your options. I have not signed up on this one yet, but it looks like a great bet to start getting your code together for when you are on the go, or borrowing someone else's cr48.

Eclipse Orion - This had been announced in 2008, and it is gaining momentum. You can download the source now if you want, but keep in mind that the project is still in the incubator. Check out this post for a little Q&A, and check this post from the "Life at Eclipse" Blog for some screenshots and little more information about the Orion Project.

IBM alphaWorks - I won't lie, I just barely found this so I have not tried it out.  However since I use more than my fair share of IBM products are work, I am sure that if you try your hardest for a month and a half, open a PMR, and then fix it yourself using undocumented methods that void your service contract, this will work for you. This looks a bit like the Orion project, only with some added http/jetty translation.  Also this may be a firefox only kind of browser IDE, so Chrome users get ready to drop a pass on this one.

PHPanywhere - I have not signed up with this one yet either, but I've heard a little buzz about it.  This is another great little editor with syntax highlights, FTP access, project management, and some collaboration features. It is still in beta so expect new features coming and a possible shift in workflow.

shiftEDIT - Another one in the running, support for editing and publishing PHP, Ruby, Python, Perl, Java, HTML, CSS, and JS. Supports FTP and SFTP and has a syntax highlighter. Another bonus is revision history and code snippets. It has a familiar flash/flex style interface which is very clean and has right-click support and plenty of context menus. You will need to set up your domain/FTP account to do the live testing, but overal a very nice and simple IDE.

Hopefully this gets you coding and not thinking that netbooks are just for surfing the internet ;) .

Print This Post Print This Post
Tagged as: , , 1 Comment
19Jan/111

Notepad++ the New IDE

So, as Phil mentioned I did move across the country, and for no reason other than to get out of surviving another Idaho/Utah winter...and a pretty amazing job opportunity. Which is what brings me to the dev blog today.

Since I got here I'd been using Aptana as my IDE, and generally speaking I love the Aptana/Eclipse IDE's mostly because of the tools that they have that make writing code so easy. However I've become a little frustrated with Aptana as of late because it seems to chew and chew and chew on the memory. And I noticed that at least once a day I was killing it and restarting it just to get some measurable performance back.
Anyhow one fine day about a week ago I was trying to view an .sql file in notepad++ (which I've always kept around as a quick editor) and noticed that the escaping of quotes was not quite rendering in the editor. I mentioned this to the author of said file and he mentioned I should try the "bespin" theme in n++ which I promptly did and thoroughly enjoyed. This lead me to investigate the plug-ins that notepad++ has, like I said I've always used notepad++ to some extent, I've just never paid much attention to the many plug-ins available to it (and there are many).

To make a long story short I've effectively replaced my Aptana IDE with Notepad++ and it's various useful plug-ins. At the onset I knew there were a few things notepad++ would have to have in order to make the switch and not hate it, they are as follows:

1. an Explorer view - I hate doing File->open and browsing, an explorer view is much more efficient
2. an Outline view - I've become addicted to the ability of Eclipse based IDE's to click on a method name in the outline and go directly to that method.
3. Debugger - this one is a big one, in my opinion debuggers cut troubleshooting time down by more than 50%

Nice to haves:
1. ctrl + click - It's always nice to be able to jump directly to a declaration with this simple combination
2. intellisense/auto-complete
3. SVN - I currently don't use SVN but it's nice know there's a plugin available.

In my quest I promptly found that I already had the Explorer plug-in installed (and it's simply called Explorer). And while the look and feel of the view is a little different than Eclipse, it gets the job done and I have no qualms with it.

I was also able to find an Outline plug-in called "Function List". It's a little rugged in appearance but nonetheless gets the job done and the best part is it's not attached to the main view and therefore not making viewing the code a pain.

I thought there would be no way a debugger plug-in would be as effective as the Xdebug setup for Aptana/Eclipse. I was wrong. DBGp is everything I hoped I would find in a debugger (and it uses xdebug, how awesome is that?), like the others it lacks some in the aesthetic department but it is simple to set up, easy to navigate and it works. I did have a little trouble getting it working at first but then I found this Tutorial and I was off and running.

As for the "nice to haves" since Notepad++ 5.0 you can turn on auto-complete from the settings->preferences->Backup/Auto-Completion menu, simply check "Enable auto-completion" and if you'd like check "Function parameters hint on input" to enable hints to the parameters a method expects.
I haven't found a great ctrl+click plug-in but I'm hoping one will come soon. There have been some attempts but they pale in comparison to what Eclipse has done.
As mentioned SVN is available (I believe there is more than one plug-in for it) but I haven't tried it. Another one that get's honorable mention is "Falling Bricks" it's just like Tetris, and handy on days you've got nothing else to do for staying awake while your code is compiling.

Once the plug-ins were installed I decided to give my new N++ IDE a spin for a full day. I have to admit I felt a bit naked at first, but it's been almost a week now and I've gotten to where I enjoy the draft.
Just for comparison I fired up all of my new plug-ins at one time and checked the memory consumption of notepad++, a mere 35M compared to the 235M Aptana gobbles up immediately after startup (and without being in Debug mode). I'll probably keep Aptana around for a while (at least until a satisfactory ctrl+click comes along for notepad++) but I've been using notepad++ for a few days now and haven't missed the bulkiness of Aptana one bit.

EDIT (2011.02.15): I'd like to point out that when I wrote this post I was at work on two (2) 17" monitors (no not even widescreen, but who wants 17" widescreen anymore?). However a few days ago I set this up on my home PC with a single 20" widescreen monitor (and much much better resolution options) and Oh my Giddy Aunt! I couldn't believe how Eclipse® like it looks, I almost wept.

EDIT (2011.11.03): I recently revisited the plugins department and I have some more goodness.
#1 while Explorer is handy I find Light Explorer much more to my liking. it uses one window instead of two and seems to be much quicker at launch.
#2 Xbrackets Light - automatically closes a bracket pair when the opening bracket is typed. I had been missing this more than I knew.
#3 Window Manager / File Switcher - both accomplish the same goal, which is to provide a quick way to switch between open files, but File Switcher uses an always detached frame, whereas Window Managers frame can either be detached or attached to the main npp frame. Window Manager allows you to turn off the tab bar which also could be useful. So pick your poison, or do what I do and use both until you can commit to one.

Print This Post Print This Post
1Sep/108

Zend Framework vs. CodeIgniter

I hope nobody minds but this is going to be more of a rant than an actual performance comparison of the two frameworks. First of all I started using CodeIgniter almost two years ago, and while it was a bit of a thorn at first it was never super difficult to figure out how to do stuff. The documentation was easy to understand and full of examples of what to do, plus things worked when I did them. As a result I've used CodeIgniter on several projects since.

Recently at my current job the powers that be (hereafter referred to as "they") decided to go from a progressive coding approach to a more MVC type approach using a framework (either custom made or already built). I'd like to point out that I'm all for using a framework especially on the applications we've got right now. I did suggest CodeIgniter as the framework of choice but my suggestion was received with disgust, so I kept my mouth shut...big mistake.

After attempting to build their own MVC Framework "they" decided to go with Zend Server Community Edition. Now I didn't (and still don't, which is sad) know a lot about the Zend Framework so I was somewhat excited to see it in action, especially since my experience with CI has been so great. And I guess maybe that's one of the reasons I'm posting today.

For anyone out there wondering if Zend is a good match for you, STOP!
For anyone out there who recently implemented the Zend Framework, WHY? It's not to late to turn back.

I've been working with the Zend Framework for about two weeks now, and I don't expect to know everything there is to know about Zend but I do expect to know SOMETHING. Let's just take a trip down memory/nightmare lane.

Please excuse me if I can't remember all the details, I've tried so hard to block some of this from ever resurfacing.

My first task was to figure out how to ajax with zend, seems simple enough right? Shoot zend even created a helper that loads the (almost) latest jQuery libraries for you so you never have to worry about being up to date. Not only that but zend has a way to build your Ajax request so you don't have to know how to do that yourself either. What they don't tell you is that in order for the jquery libraries to be loaded on your page, you DO have to use at least one of their custom php jquery building tools (in other words, you can't make all your jquery by yourself), otherwise the libs just wont load. Instead they let you beat your head against your desk for hours and hours until you finally un-comment a test jquery builder you had previously used only to find out that was the missing piece.

Next our whole team has been tasked with creating a new application using zend, it's been over a week now, I still feel like I don't know anything. Now you might be saying to yourself, "did you try google dipstick?" Yup sure did, and as google does it pulled up all kinds of links. Almost always the top 5 go strait to the official zend documentation which is by far the worst documentation I've ever seen about anything. It's like when someone has a secret and they know you want to know, but they know that if they tell you then they'll lose the leverage they have on you, so they just hold on to it with that smirk on their face and never tell you anything. There's all kinds of words but they don't say much and the examples are horrific at best. One example I was looking at had a variable in it, and they'd conveniently cut out the part where they actually initialize that variable so you have no idea what values it is supposed to hold. Turns out it was an array, but I still don't know if it was a named array or if it can simply be numbered. I actually got a little excited when I stumbled onto the Programmers reference guide, I thought "yes if anything will help this is it", I was wrong to think that and I apologize.

Now here's the kicker, I do need to backtrack a bit. When you install zend there is a GUI that is installed to help you manage how the server works, I've recently lost this GUI, by lost I mean I know where it's supposed to be and the files are all there but the GUI doesn't show up when i put the correct URL in my browser. So I started researching this, only to find that a certain part of the server called lighttpd is not running, the GUI is the only thing that requires lighttpd. So i started googling lighttpd is not running and got a fair amount of hits on that one. None of which helped. Finally I decided to create an account with the zend forums and humbly ask the zend folks themselves what to do about my problem.

To my dismay, when I logged in I found a little counter at the bottom of the page that said "Users browsing this forum: disgruntled and 0 guests" (if you haven't guessed, I'm 'disgruntled'). You have got to be kidding me, I'm the only one on this forum? Now to be fair it was after 5:00 on the east coast so I imagine the 3 people using zend in that part of the world have gone home.

how many people on this forum?

how many people on this forum?

Needless to say, I'm a little disappointed, awe who am I kidding? I'm downright furious.

On the flip side, if anyone reading this has any idea on where I can get my hands on some useful examples of zend at work. Please leave them in the comments.

Print This Post Print This Post
14Jul/106

Use PHP to Build an Array of ‘Times of Day’

It's been a long time since I posted so I find it ironic that "time" is what brings me here today. Ok that was pretty corny. You'd think this would be something that would be pretty easy to find on the web, I was a little shocked there wasn't some post about it in the PHP manual but there wasn't so here it is. I was looking for a quick way to build an array of times of day starting with midnight and increasing every half hour until 11:30 PM (or 23:30 for you G.I. Joe's). PHP has an abundance of time functions that are all very useful in their own unique way. After trying various different ones i finally came up with the following.

//build array of times.
$times = array();
$time = strtotime("00:00:00");
$times["00:00:00"] = date("g:i a",$time);
for($i = 1;$i < 48;$i++) {
	$time = strtotime("+ 30 minutes",$time);
	$key = date("H:i:s",$time);
	$times[$key] = date("g:i a",$time);
}

To break it down, I set $time to start at Midnight or 00 Hours and then set my first $times array member to the lamens "12:00 am" using the date() function. Since there are 24 hours in a day I know there are 48 half hours in a day so I set my loop to run 48 times.

Lets break down the loop:

$time = strtotime("+ 30 minutes",$time);

This will add 30 minutes to the $time variable each time the loop runs.

$key = date("H:i:s",$time);

This sets $key to the military notation of the current $time (the why will become more obvious later).

Finally I set my next $times array member with:

$times[$key] = date("g:i a",$time);

Again the value of this member is set to the ordinary am/pm notation.

If you were to look at an array member in plain text it would look something like this:

$times["19:00:00"] = "7:00 pm";

Pretty simple, now just to display it. For my purposes I chose a select box.

<select class="required" name="CloseTime">
	<option value="">--Select--</option>
	<?php 
	foreach($times as $key => $value) {
	?>
	<option value='<?php echo $key; ?>'<?php if(isset($CloseTime) && $CloseTime == $key) echo " selected='selected'"?>><?php echo $value; ?></option>
	<?php
	}
	?>
</select>

Since I set up my $key as military notation I am able to use $key as the value of the <option>. I did this so I can easily put that value in the DB as a TIME and not have to worry about stripping the " am" and " pm". Alternatively since $value was set up with am/pm notation it displays nicely to the user as 7:00 PM rather than 19:00 thus allowing regular Joe to keep his fingers in his nose rather than use them to figure out what time that is.

Print This Post Print This Post