Bash rainbow

Tweet about this on TwitterShare on Google+Share on RedditShare on LinkedInShare on FacebookBuffer this page

I recently found a need to implement text colours (warnings, attention) in a large pre-Vagrant host installer bash script. I couldn't remember which codes were which and static lists are passé, so I made this:

Which outputs colours like this:

Bash rainbow output
Bash rainbow output

Chrome Android installer

Tweet about this on TwitterShare on Google+Share on RedditShare on LinkedInShare on FacebookBuffer this page

I recently found a need to install, remove and update Chrome Android (specifically, the Chromium Test Shell) on my devices and emulators at fairly regular intervals.

Chrome shell logo

After a bit of Googling, I found Paul Kinlan's install-chromeandroid.sh shell script to help automate the process. In true community developer form, he kindly put it on GitHub and asked for improvements.

So, I made a few improvements:

  • More robust installer script that checks requirements along the way (i.e., has the APK been downloaded?) and aborts if they are unmet. This also allows the script to be better-suited to automated or event-triggered environments.
  • Installer script accepts and passes on to `adb` three commonly-used command line flags:
    • -l which forward-locks the app
    • -r which reinstalls the app, keeping its data
    • -s which installs on SD card instead of internal storage
  • I also added a simple updater and deleter (the latter of which is largely unnecessary but what the heck…)

I've been using it to great effect since.

Clean up and compact your VDI

Tweet about this on TwitterShare on Google+Share on RedditShare on LinkedInShare on FacebookBuffer this page

TL;DR

Guest OS: sudo sfill -llvz /

Host OS: VBoxManage modifyhd --compact <_.vdi>

Details

My VirtualBox thin server had put on a few pounds over the months of guest OS database imports, static resource creation, temp file creation, log rotation, and a bunch of other stuff I don't need to store indefinitely. Every time more sectors need to be called upon to store something in the guest, VirtualBox will grow the physical VDI image accordingly, up to the maximum size specified. However, when you delete files from the guest system, the VDI doesn't shrink accordingly (and with good reason).

If you have implemented a backup strategy — as I have with Time Machine — you probably don't want to back up a 30 GB VDI file every single time a single bit changes (for example, when you boot the virtual machine). This is particularly true when you have deleted old databases, resources and logs, and the guest OS really only represents about 5 GB of data.

VBoxManage modifyhd allows you to compact a physical VDI, but with one important precondition, it only truncates zeros in the guest from the VDI:

With the --compact option, can be used to compact disk images, i.e. remove blocks that only contains zeros. This will shrink a dynamically allocated image again; it will reduce the physical size of the image without affecting the logical size of the virtual disk. Compaction works both for base images and for diff images created as part of a snapshot.

So simply having deleted a file from your guest will not allow you to reclaim space. You have to zerofill the free space on guest OS's volumes.

In your Guest (in this case, Ubuntu Server 12.04.02 LTS)

sudo apt-get install secure-delete
sudo sfill -llvz /

The -ll option writes only one pass (instead of the default 38) and the -z option replaces the single pass of data from /dev/urandom with zeros, which is what VBoxManage is looking for.

In your host:

VBoxManage modifyhd --compact <virtual_disk_file.vdi>

I shrunk mine from 25 GB to 5 GB in a single step. My SSD allowed me to zerofill about 20 GB in the guest and compact the VDI in less than 90 seconds.

Manpages

 

Using subverison 1.7 with phpStorm, webStorm or IntelliJ IDEA on Mac OS X

Tweet about this on TwitterShare on Google+Share on RedditShare on LinkedInShare on FacebookBuffer this page

I use the JetBrains' phpStorm 6 IDE at work. It currently supports VCS integration with local subversion 1.6 and 1.7 repositories. According to JetBrains, using the subversion 1.7 command-line client is significantly faster at calculating file changes for big projects than using the svnkit library (which is the in-built tool phpStorm will otherwise use).

TL;DR

Instacod.es version of the code below

Best performance

For best performance, you should employ an svn 1.7 repository and specify a command-line client binary. The problem is, OS X 10.8's latest XCode (4.6.3) Comman Lline Tools installs subversion 1.6.18, and Homebrew and Fink were updated to subversion 1.8 by default, which phpStorm does not currently handle.

Trying to browse a version 1.7 repository with a version 1.8 client binary within the IDE will simply not work.

Homebrew to the rescue

First, if you're a developer of any kind, are running OS X but you're not using Homebrew (GitHub repo): you're missing out!

Using Homebrew, tap the older svn 1.7 and install it:

$ brew tap homebrew/versions
$ brew install subversion17

(make took a really long time to build subversion, for some reason. If you don't like to stare at a blank terminal and wonder, add the --verbose flag to brew install.)

Then, specify brew's command-line svn binary (/usr/local/bin/svn) in phpStorm, webStorm or IntelliJ IDEA:

Using brew's svn client at /usr/local/bin/svn

How can I tell if I'm using hardware or software RAID?

Tweet about this on TwitterShare on Google+Share on RedditShare on LinkedInShare on FacebookBuffer this page

I recently acquired an HP Proliant DL380 2U rackmount server. One can reasonably expect a rackmount server boasting 6 hot-swappable hard drive bays also to sport hardware RAID. But how can you be sure? What about that tower you inherited from a hobbyist sysadmin who claims that it "has hardware RAID", but can't tell you what the RAID controller card is.

This might not work for everyone, but it's a good start. Comments are welcome; I'm happy to add more info to the original article.

This question on ServerFault is currently a prominent search result for "how can I tell if I'm using hardware or software RAID". I thought I'd contribute my personal experience and add that, in Linux, cat /proc/mdstat will show your software RAID configuration (assuming the md kernel module, which is probably a fairly safe bet).

If you're using software RAID, you'll see something like

Personalities : [raid6] [raid5] [raid4]
md0 : active raid5 sda1[0] sdd1[2] sdb1[1]
     1465151808 blocks level 5, 64k chunk, algorithm 2 [4/3] [UUU_]
    unused devices: <none>

(Snippet source and further reading.)

If not, you'll see

Personalities :
unused devices: <none>

You can also check the output of dmraid --sets, whose output is fairly clear (no RAID and you'll get no block devices found back).

Hardware RAID implementations vary. Some provide logical devices in /dev/sdX, some (like the Compaq Computer Corporation Smart Array 64xx (rev 01) in my HP Proliant) use /dev/cciss/c0d0.

Further reading:

 

(This post originally took the format of an answer on ServerFault, which unfortunately incurred the wrath of someone who hadn't yet had their morning coffee; I've converted it to this blog post in the spirit of learning and sharing.)

Add an Open Graph og:image to your blog so it's not boring to share

Tweet about this on TwitterShare on Google+Share on RedditShare on LinkedInShare on FacebookBuffer this page

Have you ever shared something on a social media platform like Facebook or Google+ only to see it appear as a plaintext link with no image? Boring, right? If you're a front-end developer or UX designer, there's a simple thing you can (and probably should) do to fix that.

Why bother?

It is my contention that an image in a social share represents an affordance, which:

  1. Piques the reader's interest,
  2. Provides a large, square click or tap target to access content, and
  3. Makes it not boring.

Make the thumbnail interesting, and people may find themselves more interested in opening your content. I haven't performed any A/B testing to back this up - perhaps someone has - but I really feel it's just common sense UX. Why do you think the social share buttons above are buttons? Or the svbtle network"s kudos button, while entirely CSS, is a button?

Take these two examples:

Share lacking an image

I don't mean to pick on the designers of Less (this blog uses Less CSS), it's merely a convenient example because they have the same problem I do: their site is mostly text.

And this, sharing a post from this blog:

Share with an image

Assuming you're not explicitly looking for something about either xhprof or Less, which would you be more likely to click/tap?

Side by side comparison of image and imageless share

The Problem

This blog is primarily technical, with some effort put in to things like syntax highlighting and mathematical rendering of LaTeX. These are accomplished client-side, so the beautified syntax isn't picked up by crawlers (in a way that preserves their formatting).

As a result of the domain of this blog, there are rarely images embedded into articles to be automatically picked up by social sharing platforms. It suffers from the same problem as the Less CSS organization's site.

The Solution: the Open Graph

From the site:

[blockquote]Open Graph Protocol enables any web page to become a rich object in a social graph.[/blockquote]

It's understood by Facebook, Google+ (and perhaps others) and allows web pages to do all sorts of cool things well beyond the scope of this article. One of the things it allows the page designer to do is specify images that should be included as optional thumbnails when sharing content. One or several can be specified per page, like so:


<meta property='og:image' content='http://michaelsanford.com/wp-content/uploads/2013/06/no-image-share.png'/>
<meta property='og:image' content='http://michaelsanford.com/wp-content/uploads/2013/06/image-share.png'/>
<meta property='og:image' content='http://michaelsanford.com/wp-content/uploads/2013/06/sidebyside.png'/>
<meta property='og:image' content='http://michaelsanford.com/wp-content/uploads/2013/06/75199.png'/>
<meta property='og:image' content='http://michaelsanford.com/wp-content/themes/travelmug/images/opengraph-default.png'/>

Both Facebook and Google+ will allow the sharer to iterate over and choose from the listed images when the content is shared.

The last one in the list is one I created with Instacod.es (a wickedly clever site that's a cross between Sublime Text and Instagram). It's the image specified when someone:

  1. Shares a post with no image, or
  2. Shares the root of this site.

Interestingly, the Less CSS site's main focus is their code, which appears in a hero unit on their main page, but which is plaintext. To make shares sightly more interesting for them, I made them an Instacode of that snippit:

Less CSS banner code

 

An important side-effect is that you can specify images that should be shared when content is shared on a social medium. Perhaps, for whatever reason, they're not images that appear in the content.

Twitter

Twitter knows about a similar tag, called twitter:image. Add that, too.

What about the performance impact?

What about the performance impact of adding another image to the page? Good news! Chrome (27) and Firefox (21.0) and even Internet Explorer 10 don't download the content referenced in a <meta property='og:image'> element. Open Dev Tools or Firebug on this page, hit refresh and see for yourself. I suppose someone might write an extension to save these images for some purpose (such as rich quick dial tiles).

Furthermore, the content attribute takes an absolute URL, the utility of which is limited only by your imagination.

Compiling xslcache 0.7.1 for PHP 5.4

Tweet about this on TwitterShare on Google+Share on RedditShare on LinkedInShare on FacebookBuffer this page

We make heavy use of xslt at work (parsing xml data generated by php controllers), so the xslcache pecl module is pretty fundamental to our infrastructure. Of course, if you are using PHP 5.4 or above, like many pecl modules, it breaks. Here's how to get it to work.

Currently, trying sudo pecl install xslcache-beta with PHP >= 5.4 throws the following error at make:

/tmp/pear/temp/xslcache/php_xsl.c: In function 'xslcache_objects_new':
/tmp/pear/temp/xslcache/php_xsl.c:211:52: error: 'zend_class_entry' has no member named 'default_properties'
make: *** [php_xsl.lo] Error 1
ERROR: `make' failed

Download xslcache

Download the original source from the pecl svn repository, the 5.4 patch, and patch it manually:

svn checkout http://svn.php.net/repository/pecl/xslcache/trunk xslcache
cd xslcache
wget -O php_xsl.c.patch 'https://bugs.php.net/patch-display.php?bug_id=62856&patch=xslcache-php5.4-compat&revision=1362641549&download=1'
patch < php_xsl.c.patch

Make and install

This is a pretty straightforward make process for most linux software (you may need to adjust the location of xslcache.ini):

phpize
./configure
make
make test
sudo make install
sudo nano /etc/php5/cgi/conf.d/xslcache.ini
#add "extension=xslcache.so"

Note that if you make test the tenth may fail with the following:

=====================================================================
FAILED TEST SUMMARY
---------------------------------------------------------------------
Test 10: EXSLT Support [tests/xslt010.phpt]
=====================================================================

If you're using XSLT 2.0, you probably don't need to worry about it.

Verify that xslcache is installed and enabled

Since we're already in the command line, let's check there:

php -i | grep XSLCACHE

Hopefully, you will see the following line:
XSLCACHE => enabled
Furthermore, you should be able to actually know it's doing its job because your benchmarks should improve.

PHP regex for GSM 7 03.38

Tweet about this on TwitterShare on Google+Share on RedditShare on LinkedInShare on FacebookBuffer this page

Here's a regex string I came up with in PHP for testing GSM 03.38 7-bit characters for validation in text fields.

The common Latin characters and punctuation are globbed into the unicode character span.

Looking forward to jQueryTO

Tweet about this on TwitterShare on Google+Share on RedditShare on LinkedInShare on FacebookBuffer this page

My Dev circle on Google+ has alerted me, just before the end of the early bird deadline, to the existence of jQueryTO - Toronto's jQuery Conference ! It boasts such speakers as Dave Methvin (jQuery Foundation President), Paul Irish (of Google Chrome), Jen Fong-Adwent (of Mozilla) among many more!
[javascript]$("#TO").register({
transporation: function(){
$(this).comparePrice("Porter", "VIA_Rail", "car")
.convenienceFactorTranslate().book();
},
hotel: function(venue){
$(this).onAnnounce(venue).book();
},
fee: function(){
$(this).pay("earlybird");
}
});[/javascript]
Topics don't seem to be limited to jQuery, and will include talks on AngularJS and possibly other frameworks.

jQueryTO Logo

See you there!

CodeIgniter .htaccess development environment

Tweet about this on TwitterShare on Google+Share on RedditShare on LinkedInShare on FacebookBuffer this page

One of my favourite frameworks in which to quickly develop a small web app is CodeIgniter. Most CI developers will admit that the default configuration is somewhat sub-optimal. Here's my contribution: a simple CodeIgniter .htaccess file that enables controller rewriting that doesn't break the /user_guide (which one may actually want to consult locally from time to time) and provides for a project-root /static folder to store your static resources.

%MINIFYHTMLae4e2cde5c9ee4a63ed1538e48be3ebf4%

Feel free to fork, comment, improve !