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.

Google I/O 2012 is in JUNE and it's THREE DAYS! June 27-29th 2012 - Check the official blog post for details.

Using CSS3 to animate web banners (annoying yes, but the geek factor is off the grid!... yeah, bad and wicked late tron joke) - Check out this page and learn about it.

Knifeparty is ridiculously awesome if you likes the dub(ub-wub-wuuuuub-wub-ub-ubuwub)step! They released a free EP called 100% No Modern Talking which can be yours by visiting their website and giving them an email to spam (that requires no validation...).  There is some language on "Internet Friends", but to each their own.  In case you wondered, Knifeparty is two members of the freakishly awesome band pendulum, so you know they are good.

Derezzed on floppy drives... Man why did we kill these things? analog tech has such a good sound!

A post from WebResourcesDepot on the CSS3 presentation machine named impress.js, I love the trade-shows lately that give their presentations inside of a browser.  Just makes powerpoint look as dated as it is.  Amazing work, check it out.

Now that I work on a mac I have learned that life without XAMPP sucks.  MAMP is workable, but I have an aversion to forking out money to access the apache server that is built into OSX.  Luckily there is a much cooler alternative that isn't nagware and that will help you auto-install tons of webapps (including joomla and wordpress).  Check out AMPPS, easy, free, and works on linux, mac, and windows. Good News! @blender has pointed out in the comments that XAMPP is totally mac ready and available, check it out and live life happy again!

I hate to glom onto other talent, but another post from webresourcesdepot is right up there on the awesome charts.  Everything you need for node.js (my new favorite scripty server language).  Go to his node.js post, revel in his links, built something useless, then something cool, and then something useful

That's all for now, but there are plenty more.  Over at CSS-Tricks Chris has started a new podcast called ShopTalk, and they have already interviewed the Johnathon Snook (if you don't know of Mr. Snooks work, you need to leave right now and Google it.  I don't even mind, I give you my permission, go, go now and do it!).  Head over to the podcast and listen to it, remember they take questions and answer them so if you are stumped, give it a go and see if your question can get solved by some truly great minds on the web.

Lastly, HAPPY BIRTHDAY/ANNIVERSARY E-COM DEVBLOG!  That's right, this makes year number 4 of me and my crew wrecking the internet and putting it back together the way it was meant to be with tips, links, tutorials, and the occasional waste of time.  It's been a great four years and I hope that we can keep the magic going for another four.  Hang out because I have a feeling that this year is going to be one of the best years the internet has ever seen.  And don't worry about that Mayan 2012 thing, I heard it straight from the aliens that abducted Elvis to make him their ruler, it's a total hoax

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.

This means you get to watch the show even if you were not able to come to the event. To see what sessions will streamed live check out the session schedule and look for the LIVESTREAMED text and video icon. Some entertainment will also be streamed (Jane's Addiction performance anyone?)

If  you are going to the show and want to meet up, feel free to find me . During lunch there is a high probability that I will be in the developers sandbox at the iFit Live booth.

(continue reading after the break)

Let me share with you why I thought video playback would be easy and incredible.

• Xoom resolution is 1280x800 on a 10.1" screen
• NVIDIA Tegra2 1.0GHz Dual-Core (created by the same  NVIDIA that created CUDA...)
• It runs Android (see media specs for android media playback, giant hint for the solution on this page; look at the details section for H.264 playback)
• 1080p HDMI out playback touted proudly on the internet and through sales clerks
• 720p playback support on the device screen
• Honeycomb, 3.0 baby, the show, the big win, other catch-phrases

Given the specs (especially taking the 720p device playback and the 1080p HDMI out into consideration) I would have pegged the device as a High Profile, 5.0, 5+ B-Frame, with psycho-visual enhanced, 3k-5kbps video-encoded dolby 5.1 384 kbps ACC HCv2 (yes, overkill) loving machine of pure self indulgence and immaculate beauty. Sadly, it is not.  The solution is actually the one that would keep most video encoders locked in their room scratching their heads attempting to figure out why tweaking b-frames, bitrates, and AAC vs MP3 audio encoding had zero effect on the latency, lag, and stutter that makes playback so insufferable on the Xoom - well unless they checked that giant hint I mentioned above.

Keep it (ridiculously) Simple Stupid

No, I'm not trying to be clever, I'm serious about this. Pretend that marked-up little jewel is little more than a motorola razr (ok, that may be a little much, as the razr only plays back 3gpp... but I digress). The secret to encoding for the Xoom is this; Baseline Profile 1.3, 20RF, 160kbps AAC-LC.  I'll say it again, Baseline 1.3 (think video iPod), 20RF (this one varies, but RF 20 in Handbrake is a pretty good spot), 160kbps (or less if you don't mind losing a little fidelity, you can go as low as 48 if you don't mind some ear-numbing blur, or are not an audiophile) AAC-LC (you can try the HC, but LC will probably work better, I mean I didn't test it, but you should do that later and let me know in the comments so I can strike the previous sentence ).

How do I get video from "x" encoded?

Yeah, that's a little tricky, luckily I'm going to provide you a method of getting video goodness on your Xoom, to be fair I'm going to warn you that you may need some knowledge of DVD/Blu-Ray rippery which will not be provided here. For those of you with video content that you need transcoded, if the masses cry out for help I'll post a guide on transcoding. But for the most part, this guide is still applicable to non-rippers as Handbrake will process other files and transcode them for you, in fact one of my test files was a mov file, so following this guide will probably work for you.

For those of you who wish to take the easiest of all routes, do yourself a favor and spend $10-20 on "DVD Catalyst", they have Xoom presets that does a fantastic job of kicking out your media in a very watchable fashion. You may still need a deCSS program, but even so DVD Catalyst is easy to use and was recommended on LifeHacker (note that you will probably need the paid version, not the free one).

DVD/BR-Disc to Xoom

Step 1 - Rip your DVD/Blu-Ray

Windows users, you will need a ripping program and a deCSS program, since both of those exist legally, I welcome you to acquire one. No, I will not give you one (it's against the law here and mixing it up with DMCA just isn't my cup of tea). I will tell you that you can get a "legal" deCSS utility from slysoft called "AnyDVD" and "AnyDVD HD". These apps are subscription based (yearly) and will allow you to deCSS your movies. You can also try DVD43, but that hasn't worked for me in quite a few years.

Mac users, you will need handbrake and VLC installed. If that doesn't work, try a program like mactheripper (which doesn't seem to be working for me as of late - the free version that is) or do a little googling and find the new hotness for ripping DVDs. Again I'm not posting links to these, and I'm only mentioning them by name as they are fairly well known already and they show up pretty quick in the right search on "binglehoo".

You can rip your movie to the file system as folders and vob files, or you can rip to ISO (which is my preferred method), but whatever floats-your-boat is what will work here. Once you have the DVD ripped to your hard drive we can move on. Please note that DVD rips will work, but they will look a little "soft" when played back on the Xoom, this is due to the pixel stretching, since your DVD will come off at best 480p and your screen wants to playback at 720p.  I don't believe this isn't a real problem though, just hold it a little further from your face, or buy a cradle/dock/case-stand and you are set. Blu-ray rips look amazing though, seriously, they look very nice. Kind of like the difference between viewing a video on  a superAMOLED screen and a 3rd gen iPod*.

*I'm qualified to say that - as my opinion -  since I have both a 3rd gen iPod and a Samsung Epic, and yeah, the difference is night and day crazy. Video used in comparison was a 480x320 800kbps episode of 30 Rock.

Step 2 - Open Handbrake and let's get the encoding party started

Ah handbrake, soother of mp4-related aches and pains. Encoder of happiness, weapon of choice when dealing with quick batch fire-and-forget encoding sessions. Oh and did I mention free for Linux, Windows, and Mac?

Now for those of you that know how to edit your "user_preset.xml" file you are in luck, I happen to have a Xoom preset pre-built and ready for use (lucky you!), for those of you that don't know how to do that (it can be a little tricky), I'm going to put a little screen shot in here of the preset so you can follow along.

XML preset file can be found here, just unzip the file and either replace your current xml file, or open yours and mine and add my preset to your preset node (clear as mud?). To find where your presets are kept, please visit the official Handbrake support page (it's in a different location depending on your OS)

For those of you that need a little visual aid and a walk through of the settings tabs, I have you covered:

Handbrake 0.9.5 on Windows 7

For the "Source" I picked a 1080p .mov movie trailer I happened to have lying around, ignore my naming, this screenshot was taken during testing, but after I had finalized what quality settings I recommend (the test with that naming scheme was an epic fail btw).

If you ripped a DVD to ISO, click on Source -> Video File -> movie-you-ripped.iso (yes, doing that works). If you ripped the folders, go find your rip folder and pick the video folder containing the vob files. If you don't see your show (look at the "Title" to check for length) then pick another file or try individual vob files. Next choose your" Destination" to save your file and then step through the tabs at the bottom to set your file up.

Picture tab - pretty simple, if it's a DVD, leave it alone, if it is a 1080p rip, set it to 720p (read that as 1280 x whatever-anamorphic-loose-gives-you). Yes I know Anamorphic settings will vary, but this is a quick guide not an in-depth guide into the rational of being >-.5% off on screen ratio.

Video Filters tab - remember the K.I.S.S.? yeah, leave it alone you don't need'em or want'em.

Video tab - You can play a bit on this tab, keep Video Codec at H.264, and feel free to adjust your Framerate (I keep mine at source, but sometimes I'm lazy like that), Quality is where you can go nuts, if you want a Target Size, this is the place.  If you want an Avg Bitrate I'm going to suggest 2000kbps for 720p and around 1000kbps for 480p video. However, my suggestion is to go with the Constant Quality at RF:20 setting.

Audio tab - Pretty straight forward, either leave it alone, or tweak the kbps of your audio, it should default at 160kbps AAC, but you can lower it or increase it if you want too. This can put a serious dent in file size if you are cramming it in. Also if you are going to play it back on the tinny-poorly-designed-why-on-this-great-green-and-blue-globe-we-live-on-did-they-put-the-speakers-on-the-back Xoom, then you can drop it to48-64kbps without missing hardly anything. Now if you are going to crack out your etymotic's and listen to this, then yeah, you'll wanna leave that at least 160.

Subtitles tab - I don't sub, so I can't give you guidance on this one.

Chapters tab - I always rip the whole show and nothing but the show, but if you aren't like me, feel free to make adjustments as needed.

Advanced tab - Finally the tab worth taking a screenshot of, follow the picture above. Ref frames at 3, NO B-Frames, NO CABAC, NO 8x8 Transform, NO Weighted P-Frames, and NO deblocking. You can play with the Trellis setting. I left if off for some encodes, then at Default for others. It seemed to help on some mostly black to bright (say... TRON?) videos. As you can see from the settings I wasn't kidding when I said the Xoom acts like an old school video playback device. It seems that it just takes too much power to decode mp4 files with all the bells and whistles turned on.

When you are all set with your settings just click the green "Start" button and away Handbrake goes leaving you to wait in anticipation (you may do some batch encoding if you'd like, just use the "Add to Queue" button. If you're new at this, you probably aren't going to want to batch encode yet).

After that you just need to get the file on your Xoom, for Windows XP, just plug it in and use windows explorer to dump it on the drive, for Windows 7 users, you can attempt to "sync" it through media player, but I find that just using windows explorer is much easier (but then again I've always found using the file system to move files and off much easier than GUI-driven programs).

Questions, Comments, Feedback, and Fixes

That should just about cover it, as always I welcome your comments, questions, feedback, and fixes. If anyone wants a screencast, let me know and I'll try to carve some time out and get one posted.

I got a call from a cousin of mine today asking me about a work from home website she was considering. She wanted me to look into it for her, so she emailed me the link. When I clicked on the link my browser couldn't find the url. I tried again, nothing. Again only this time I removed all query strings and went to just the home link of the url...still nothing. So I waited an hour or so, only to come back and get nothing. The following is my email response to my cousin.

I still can't get a page to load from this link, and googles link doesn't work either. That makes me a little nervous about this one, it's not uncommon to have a website up to take credit card transactions and then down a day or two later like it never existed. Only instead of $98 they got away with your credit card info. A few things to look for when paying online:

1) is the site secure? you can tell this by looking for an https in the address bar of the browser (i.e. https://www.site.com) the 's' is the important part, it literally means secure. But just because the 's' is there doesn't mean it's really secure. look for a padlock type image in the bottom right corner of your browser or sometimes it appears in the url bar as well (I think Internet Explorer puts it in the bottom right corner but I could be wrong) if the lock is unlocked or broken your connection is not secure. DO NOT process an account transaction over an unsecured line even if you trust the company. The reason is your information is sent over the internet in plain text and vulnerable to any sniffer out there. A secure line will encrypt your data and decrypt it when it arrives at it's destination.

2) Only shop at well known trusted sites. if you are not familiar with a particular site it's a good idea to Google it, check bbb.com for info on them and if your gut tells you "bad idea" follow it.

3) Never respond to Phishing emails, these are emails designed to get you to give up personal information. An example is something from a bank maybe you have an account and maybe you don't but they'll ask you to verify your account number via email. NEVER communicate with any financial institution through email if you are sending sensitive data. If you get this type of email from an institution you have a relationship with, call them first using a number from their website (Google it) or on your checkbook or credit card.

When it comes to work at home jobs I'm not really an expert but I do know there are a lot of scams out there. Some are just after $100 a person and there are a lot of people who will risk that, but more than likely if this site isn't up again by tomorrow (and my bet is it won't be) they were trying to harvest credit card numbers. Generally speaking, if it's something as easy as copy and paste links, or stuffing envelopes, or comes with a guarantee or promises instant wealth it's a scam. A monkey can be taught to copy and paste, and nobody can guarantee a job, even the top colleges don't claim that.

As far as certifications go, there are a lot out there, the best approach would be to do some research on the certification, is it legitimate? Is there a market for it? Most Certifications are printed on an 8x11 piece of card-stock paper, anyone can fake one on almost any printer, they might even have you print it yourself (which tells me they don't take their own certification seriously).

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