Lazy Loading Images with JQuery

I am trying to speed up a website every way that I can. I decided to look into lazy loading which I have read about numerous times.

Lazy loading is basically not wasting time loading images that are off the screen, or out of the viewport.

This got me thinking, why do the browsers not do this for us? They would be better equipped to handle this than a JS developer. Especially since the browser is doing the rendering, it knows what it needs in order to display the screen.

Git Flow Bump Version Script

I wrote a simple bump version PHP script that does quite a bit of lifting for me.

  • It maintains my version number, very basic
  • It takes an argument on whether I need my templates updated due to CSS/JS changes.
    • If necessary, creates a new assets directory based on version number to fix caching issues
    • Pulls latest css/js into that directory
    • Updates template to new assets directory
    • Adds and commits new template
  • Optional second argument overrides the version #
  • Starts a new release branch
  • Opens my RELEASE notes for editing
  • Adds and commits my release notes
  • Finishes my release branch

Below is specific to my situation. PATH_TO_TEMPLATE_FILE would need to be changed, as well as the preg_replace lines to suite your needs.


if (!in_array($argv[1], array('y', 'n'))) {
print "Usage: {$argv[0]} (y/n) [version]\n y=update css/js\n n=no update\n";
exit;
}

if ($argv[2] && !preg_match('#v\d\.\d*\.\d*#', $argv[2])) {
print "Invalid version (should be v\d.\d.\d)\nUsage: $0 (y/n) [version]\n y=update css/js\n n=no update\n";
exit;
}

chdir(dirname(__FILE__));

$fileName = '.Version';

$v = file_get_contents($fileName);
$a = explode('.', $v);
$minor = $a[2]+1;
$v = "{$a[0]}.{$a[1]}.$minor";
$fh = fopen($fileName, 'w');
fputs($fh, $v);
fclose($fh);
`git add $fileName`;
`git commit -m "Increased version to $v"`;
echo "Version updated to $v and added to git\n";

if ($argv[1] == 'y') {
$asset = "assets/v{$a[1]}.$minor";
mkdir($asset);
chdir($asset);
`sh ../../update_css_js.sh`;
`git add .`;
`git commit -m "Increased css/js version to v{$a[1]}.$minor"`;

chdir('../../');
$template = file_get_contents('PATH_TO_TEMPLATE_FILE');
$template = preg_replace('#data-style="sI" href=".*?" media#', 'data-style="sI" href="/assets/v'.$a[1].'.'.$minor.'/style.css" media', $template);
$template = preg_replace('#jQuery.getScript\(".*?" \+ pluginPack#', 'jQuery.getScript("/assets/v'.$a[1].'.'.$minor.'/" + pluginPack', $template);
$fh = fopen('PATH_TO_TEMPLATE_FILE', 'w');
fputs($fh, $template);
fclose($fh);

`git add PATH_TO_TEMPLATE_FILE`;
`git commit -m "Increased css/js version to v{$a[1]}.$minor"`;
}

`git flow release start $v`;
$date = date('Y-m-d');
$command = << /tmp/out && mv /tmp/out RELEASE
EOF;

system($command);
system("vim RELEASE > `tty`");

`git add RELEASE`
`git commit -m "Updated RELEASE notes"`

system("git flow release finish $v > `tty`");

 

Making WAVs play in Chrome for Mac

I was really frustrated that our voicemail was not working in Chrome. All it said was Missing Plug-in.

Through some research, I found that the voicemail system was loading the files via ajax to a PHP script. Because the extension was not .wav, Chrome was confused.

How did I solve?

Well, this is an internal box with very little traffic and I have complete control of it.

I first told Apache to treat all .php.wav files as PHP. In httpd.conf of php.conf you will see
AddHandler php5-script .php

Add this right below it.
AddHandler php5-script .php.wav

Restart Apache.

Then I symlinked the .php file to a .php.wav file. So that they were identical. Then in the file that pulled in this php file, I changed the filename there as well.

Fixed my issue. :)

PHP Parse error: syntax error, unexpected $end in

I was receiving this error and did a quick Google search to figure out why. Most posts referred to a missing curly brace “}”.

I went through about 3-4 posts when it hit me. My code was from an older server that allowed the short tag

I know it’s not recommended, but to fix the error, I just changed php.ini.

Change this link from Off to On, and restart Apache.
short_open_tag = On

I am proud of my progress with Javascript…

I am proud of my progress with Javascript. I used to consider myself a javascript hacker. I could put other people’s components to work, but wasn’t comfortable writing my own.

I would consider myself much more proficient today. I can write maintainable/reusable Javascript. I have become more capable of writing routines that can be used on multiple widgets easily.

My latest code has been able to work on multiple “widgets” within one page. This was exciting for me, and I ended up staying late at work the other night as I got near completion. I was sooo happy with my accomplishment, but being the only programmer, it can be tough. Nobody really appreciates the successes that I feel are so exciting. It’s not their fault by any means, they just are not into the tech as much as I am.

At the end of the day, I tell my wife. She is the best cheerleader a guy could have. While she doesn’t fully understand, she puts on a smile and tells me how great it is when I do accomplish the small things. She tries so hard to be understanding and just there for me. I am a lucky lucky man.

Patch for VisualSearch.js To Prevent AutoSearching

I learned about VisualSearch today when I listened to The Javascript Show podcast.

I started using it for some backend work. However, I did not like the fact that as soon as you completed a facet, it did the search automatically. Don’t get me wrong, it is great for the way DocumentCloud is using it. Very ajax responsive, but for what I am trying to do, I needed that to stop.

I changed it so that I could pass autosearch: false as a parameter to VisualSearch. Now it will only search after hitting enter.

--- visualsearch.js        2011-08-04 13:16:46.000000000 -0400
+++ visualsearch.js     2011-08-04 13:23:21.000000000 -0400
@@ -30,6 +30,7 @@
     var defaults = {
       container   : '',
       query       : '',
+      autosearch  : true,
       unquotable  : [],
       callbacks   : {
         search          : $.noop,
@@ -543,7 +544,9 @@
         var originalValue = this.model.get('value');
         this.set(ui.item.value);
         if (originalValue != ui.item.value || this.box.val() != ui.item.value) {
-          this.search(e);
+            if (this.options.app.options.autosearch) {
+                this.search(e);
+            }
         }
         return false;
       }, this)

Watch me throw the Brunswick C-System Ulti-Max

[bowlingball value="9659"/]

Based on the [bowlingball value="9120"/], I was expecting The [bowlingball value="9659"/] to be a hooking monster. Brunswick was able to make the ulti-max even more angular. I think this was accomplished with a pearlized coverstock that helps the ball easily clear the heads, going longer before making its move towards the pocket.

The ulti-max has a great color combination that makes the bowling ball very appealing as it rolls down the lane.

Find some oil, keep your speed up, and let this bowling ball do all the work for you. Fantastic job Brunswick.

PHP Excel/reader.php Date Format Error

I, like so many others have been confused by the Excel/reader.php problem with dates. I took the time today to patch it for myself. This works in my situations, but may not in yours. Make a backup before trying this.

You will see in the diff that for some reason the date being returned was off by a day, so I fixed by adding 86400.

Here is the patch:

Why Aren’t You Using Git Flow?

I gave a presentation at Orlando PHP last night. I had a great time, and everyone there was fantastic.

I really want to improve my public speaking. I gave a very simple introduction of myself to a Google Checkout panel a few years ago and thought I was going to passout. I felt I did a horrendous job, and all I was doing was talking about myself and the company I work for.

Enough about that. Last night I was running late due to traffic on I-4 because of the rain. I got there and was very surprised to see one of the biggest turnouts we have ever had for Orlando PHP. I quickly setup my computer while David Rogers talked a little about GIT.

I sped through my slides a little bit. I really didn’t want to just sit there and read what was on them. I wanted to be personable, clear spoken, and desperately wanted to avoid filler noises (ah’s, umm’s, like’s and you know’s). Overall I am very happy with the way it turned out.

Had I gotten there early, I would have setup a tripod and camera to tape it. Because I was running late, I scrapped that.

People were asking me some great questions, and I hope I took enough time to answer to the best of my ability. Some things I deferred to other members of the group that had better answers. Thank you Ketema for stepping in where you could.

I have become very passionate about using Git & Git Flow for my development. It has truly made me a better developer, rather than just a hacker.

Thank you to Vincent Driessen for sharing his git workflow originally. I used it for a couple of weeks, but ultimately did not keep up with it. At some point he released the “git flow” tools that I used in my presentation. I became aware of these tools thanks to Jeff Kreeftmeijer who wrote a blog post titles “Why Aren’t You Using Git Flow?

I have some resources at the end of the slides that you can refer to.

Dojo dijit.form.Form submission with a dijit.form.Button

ARGH!!! I searched and searched for a very long time for this answer. I hope it helps someone.

I couldn’t seem to get the form to submit correctly. I tried various ways. Widget’s, non widgets, declarative, programmatic.

Turns out for some very strange reason, the form does not take kindly to data-dojo-type, it must use the older dojoType.