Best Practices for Git Commits?

I’ve been updating my online portfolio hosted on GitHub, and find myself getting lazy. Instead of developing on my local server, then publishing changes, I’ve been making little changes and pushing them to the portfolio repository. Sometimes it’s as simple as adding a link, other times it’s adding/removing a feature, or a whole group of images at once.

I get the feeling there’s a better way of committing and pushing changes in general, but before I get too entangled in one method, I thought I’d ask you who are working with Git (or any versioning system, for that matter) how you do things. Any advice is welcome, especially if you have a particular reason for how you work.

#Grid (Hashgrid) WordPress Plug-In

After using the #grid feature on the Analog website, I decided to add it to my development toolbox. I’ve been working on WordPress for the past few months, so I thought I’d try to make a plug-in out of it. After poking around the Analog site a bit, this is what I came up with. Feel free to comment or tweak as needed.

I wanted this to be as simple as possible, so all it does is load up the CSS and JavaScript files. The hashgrid.js file does all the heavy lifting.

You can download the plug-in here.

Display Featured Links Randomly Using PHP

I had a request to add a “Link of the Day” feature to one of the pages on the Law-related Education pages of the OBA website using technology we already have. I’m sure there are widgets out there already that will do this for me, and it may even be built into whatever CMS we deploy next, but I wanted to learn a bit so I decided to add it to our current site. I don’t know much about PHP, but I learned to code in VB.NET and C++, so I can learn enough as I go to make things work.

With the help of “The Google”, I was able to piece together a bit of code that reads from a CSV file into an array, then randomly displays a link from within that array on each page load, so that a new link gets displayed on each visit.

The original code has appeared in several forms across the Internet already, so if it’s yours, please let me know so I can credit you. I’ve made some slight adjustments to fit my needs.

[sourcecode language=”php” wraplines=”false”]
<?php
/**
* @function makeClickableLinks
* @param string
* @returns string
*/
function makeClickableLinks($text) {
$text = eregi_replace(‘(((f|ht){1}(tp|tps)://)[-a-zA-Z0-9@:%_+.~#?&//=]+)’, ‘\1’, $text);
$text = eregi_replace(‘([:space:[{}])(www.[-a-zA-Z0-9@:%_+.~#?&//=]+)’, ‘\1\2’, $text);
$text = eregi_replace(‘([_.0-9a-z-]+@([0-9a-z][0-9a-z-]+.)+[a-z]{2,3})’, ‘\1’, $text);

return $text;

}
/**
* @function displayLink
* @param string // path to csv
*/
function displayLink($csv) {
$fp = fopen($csv, "r");

while (!feof($fp)) {
    $contents[] = explode(&quot;,&quot;, fgets($fp, 512));
} //!feof($fp)

fclose($fp);

do {
    $x = rand(0, count($contents) – 1);
}
while ($contents[$x] == 0);

// displays link title above clickable URL
echo $contents[$x][0] . &quot;n&quot; . makeClickableLinks($contents[$x][1]) . &quot;n&quot;;

// displays link title as clickable link
echo '&lt;a href=&quot;'.$contents[$x][1].'&quot; rel=&quot;nofollow&quot;&gt;'.$contents[$x][0].'&lt;/a&gt;';

}
?>
[/sourcecode]

UPDATE

WordPress keeps messing up code formatting, so I made it into a Github Gist.

UPDATE 2

Just learned of a shortcode for formatting code blocks on the hosted version of WordPress. Hooray for sourcecode!

View a working sample of this code.

Don’t Forget to Clean Your Code!

I recently was asked to update a Web page with a rather long list of names, which were provided in a Word document.  I use a combination of Dreamweaver and Expression Web, because they both have good tools for stripping out problematic HTML from Word, but today they weren’t much help.

This particular document had a table (of sorts) built into it, which listed names and cities, but after a good ol’

copy and paste, I found that things didn’t quite line up.  Upon closer review, I found that the “table” was actually made up of tabs and spaces.  While this worked in Word, it made a horrible mess for the Web.  Just doing a copy and paste job created spaces (technically non-breaking spaces — “nbsp”) that seemed like empty space, but actually take up quite a lot.  In fact, these spaces made the page 322kb!  Most of the larger pages on the site were around 20-25kb, so I took another look at things.

In this case, I decided not to go with a table for the little bit of text that could fit in, instead going with the city name in parentheses after the person’s name.  After removing all the nbsp’s from the code, I was able to shrink the page to 32kb – a 90% reduction in page size!  That means the page will load in just over 1 second, instead of over 12 from before.

So, to recap:

  1. Copy and paste doesn’t work as expected with the web, so be prepared to clean up your code a bit.
  2. Check for spaces that don’t belong, particularly the “ ” – they take up more space than just hitting the spacebar does.
  3. Use a tool like Firebug for Firefox, or the built-in tools in several other browsers (IE8, Safari 4, Chrome) to test your page for load times and see how you can improve them.

Windows Live Tags: Code,Word,Dreamweaver,Expression,tools,HTML,spaces,text,reduction,size,Copy,tool,Firebug,Firefox,Safari,Chrome,nbsp

WordPress Tags: Code,Word,Dreamweaver,Expression,tools,HTML,spaces,text,reduction,size,Copy,tool,Firebug,Firefox,Safari,Chrome,nbsp