ShiftEdit

ShiftEdit is an online IDE for developing PHP, Ruby, Python, Perl, Java, HTML, CSS and JavaScript through FTP, SFTP and Dropbox. I recently started using ShiftEdit after seeing it from the Chrome Web Store. I’m using it at the moment to manage several of my websites.

ShiftEdit allows you to create and edit PHP, Ruby, Java, HTML, CSS and JavaScript scripts. ShiftEdit has a built-in SFTP support to manage your websites. Just supply your FTP credentials within ShiftEdit to manage your sites. ShiftEdit also has syntax highlighing, block tabbing, undo/redo, line numbers, as well as jump to any line number.

If you’re looking to manage your website via the browser, without the need for a file editor or FTP client, you should look into ShiftEdit. All your work is done via the browser. No more downloading and uploading files. No more editing offline. Changes are immediate.

ShiftEdit keeps tracks of your file changes as well with Revisions History. You can highlight several files and look at file differences. You can also bookmark files for easy access later. There are more features. Visit ShiftEdit if you’re interested.

JQuery.js Or JQuery.min.js

If you’re running JQuery on a production site, which library should you load? JQuery.js or JQuery.min.js? The short answer is, they are essentially the same, with the same functionality.

One version is long, while the other is the minified version. The minified is compressed to save space and page load time. White spaces have been removed in the minified version making them jibberish and impossible to read.

If you’re going to run the JQuery library on a production site, I recommend that you use the minified version, to decrease page load time, which Google now considers in their page ranking.

Another good option is to use Google’s online javascript library. This will save you the hassle of downloading the library, as well as uploading to your site. In addition, your site also does not use resources when JQuery is loaded.

The latest JQuery minified version from Google is available here.

You can link to it in your pages using:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Add Google Maps To Your Posts

They say a picture is worth a thousand words. Adding a static map to your posts can make a world of difference. Your posts not only look good, but are informative and effective as well. Whether you are giving out directions or simply just showing off where in the world you were at one point, you can add great value and effectiveness to your posts. The good news is, adding Google Maps is not so difficult.

The Google Static Maps API

The Google Static Maps API lets you embed a Google Maps image on your webpage without requiring JavaScript or any dynamic page loading. The Google Static Map service creates your map based on URL parameters sent through a standard HTTP request and returns the map as an image you can display on your web page. I will breakdown the URL piece by piece and explain.

The URL

http://maps.google.com/maps/api/staticmap?<em>parameters</em>

Required Parameters: Center, zoom, size and sensor. Examples.

center=101+Market+Street+San+Francisco  (enter address or latitude, longitude)
zoom=14 (from levels 1 to 20)
size=480x300 (map size in pixels)
sensor=false (use default 'false' unless using GPS locator)

Optional Parameters

Maptype: Roadmap, Satellite, Terrain or Hybrid.
Marker: See below.
Paths: See below.

Putting It All Together

We can string it all together using ampersand (&).

This URL:

http://maps.google.com/maps/api/staticmap?center=101+Market+Street+San+Francisco&amp;zoom=14&amp;zoom=14&amp;size=480x300&amp;maptype=roadmap&amp;sensor=false

Produces this:
San Francisco

Finally, to add an image to your post, just add an HTML img tag. Example:

<img src=”http://maps.google.com/maps/api/staticmap?center=101+Market+Street+San+Francisco&zoom=14&zoom=14&size=480×300&maptype=roadmap&sensor=false” 
alt=”San Francisco” />

There are other options that can be added such as Markers and Paths, but are a bit more involved. You can check out the rest from the Google Static API V2 Developer Guide.

Javascript and WordPress Threaded Comments

Sometime after WordPress 2.7 and before WordPress 2.9.2, I lost a key functionality within WordPress. It’s threaded comments.  I blame myself for constantly tinkering around with the theme. I must have deleted a key piece of code somewhere in the theme that prevented threaded comments from working.

For those not familiar with WordPress, the threaded comments functionality allows the “comment form” to jump underneath a specific comment when a “Reply” link is clicked. Clicking “Cancel Reply” restores the “comment form” to its original position. When a comment is submitted, the comment is placed directly underneath that specific comment.

In my case, the threaded comment function still worked, sort of, but not quite the way it was supposed to. I did some digging around. After reading a couple of articles, I finally found what was missing in my WordPress theme. It’s a tiny Javascript command that you place in header.php.

This tiny Javascript makes the comment form jump from one place to another. Make sure this code is in header.php just before the <?php wp_head(); ?> command.

<?php if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ ); ?>

Lightbox JS

Here’s a nice JavaScript called Lightbox JS. If you click on the sunset image below, you’ll find out why. I like the way the script dims the page and isolates the image bringing it to focus. The script also automatically centers the image. If you have multiple images, you can group them together. The script automatically overlays the Next and Previous graphic images on them. The script works great, but there are CSS validation errors although they are neglible, but I’m still looking for a fix.

travel03.JPG

The Shelf

If you look above, you will see a link that says “More.” If you click on the link, it will open up a non-descript expandable and collapsable shelf with a black background displaying text about the author, the theme and a few links. The shelf gives the effect the content is being pushed down. It’s a pretty neat effect made possible by using Javascript. If you are interested, you can read more about it at Asymptomatic.net.

Widgets

Widgets are pretty amazing. I witnessed what widgets can do while poking around with several themes at WordPress.com. I was pretty amazed how users can drag and drop elements into the sidebar area. The usual sidebar suspects such as Pages, Links, Calendar, Categories, Archives, Recent Comments, Search and Meta were available along with Text and RSS feeds. With Text, you can drag and drop a text box in the sidebar panel which is similar in function to the About text you see in several WordPress themes. The RSS widget allows you to syndicate news in your sidebar such as CNN, BBC and Yahoo News for example. You can specify how many Text and RSS widgets you want added by simply selecting from a dropdown menu.

Continue reading

Ajax Calendar

I recently installed the Ajax Calendar from UrbanGiraffe.com on my homepage. The Ajax Calendar allow viewers to navigate the calendar without ever updating the page. This is made possible by AJAX, the acronym for Asynchronous JavaScript And XML.

Wikipedia describes Ajax:

Ajax is a Web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire Web page does not have to be reloaded each time the user makes a change. This is meant to increase the Web page’s interactivity, speed, and usability.

A great feature of the Ajax Calendar is the split view which displays a drop down list of entries of the current month on display. The built-in cache increases subsequent delivery speed and reduces server load. The Ajax Calendar was fairly easy and straightforward to install. I only made one code change to sidebar.php.

Finally, I modified the SQL statement in common.php by adding a “DESC” at the end to reverse the order of articles listed in split view. I just prefer seeing the articles listed from the most recent to the beginning of the month in reverse order. Here’s the code:

SELECT ID,post_title FROM $wpdb->posts 
WHERE MONTH(post_date) = ‘$monthnum’ 
AND YEAR(post_date) = ‘$year’ 
AND post_status = ‘publish’ 
ORDER BY post_date DESC

One last thing, you have to clear the cache to see the changes take effect.

Bluefish

I ran across a powerful editor called Bluefish. It’s an editor geared for programmers and web designers. The editor supports HTML, C, PHP, Java, JavaScript, SQL, XML, Python, Perl and many more. It’s fast and lightweight and has tons of features that I don’t even know and will probably not use. I used it for about 10 minutes the other day and I just fell in love with it. Sorry, it’s for Linux users only. You can check out the Bluefish website here. By the way, very interesting font on their website. They are using “Bitstream Vera Sans.”