Category Archives: Tutorials

My Calendar – WordPress Plugin Javascript Dates Issues in List View

After contacting the developer of the plugin, the whitespace issue must have occurred during file transfer or during some other mysterious occurrence. The whitespace is not in the original development code, and so not only are my line numbers all wrong, but this shouldn’t be an issue for anyone else.

While working with the plugin My Calendar by Joe Dolson I encountered a small issue. Whenever I tried to view my calendar as a list, the event list would become hidden on page load.

I had to identify the offending script that was hiding my events on me. Using Chrome’s debugger I was able to identify the offending script as “../wp-content/plugins/my-calendar/js/mc-list.js” which included:

(function ($) {
    'use strict';
    $(function () {
        $("li.mc-events").children().not(".event-date").hide();
        $("li.current-day").children().show();
        $(document).on("click", ".event-date",
            function (e) {
                e.preventDefault();
                $(this).parent().children().not(".event-date").toggle().attr("tabindex", "-1").focus();
                var visible = $(this).parent().find(".vevent").is(":visible");
                if (visible) {
                    $(this).parent().find(".vevent").attr("aria-expanded", "true");
                } else {
                    $(this).parent().find(".vevent").attr("aria-expanded", "false");
                }
            });
    });
}(jQuery));

We are interested in this line in particular:

$("li.mc-events").children().not(".event-date").hide();

Which directs all children that aren’t the date to be hidden. The issue arises when WPautoP does it’s thing and wraps the date in a <p> paragraph tag. While the .event-date will remain visible, it’s parent <p>  becomes hidden and in turn hides .event-date.

The solution is to modify “../wp-content/plugins/my-calendar/my-calendar-output.php” at line 2563 to remove the unnecessary line breaks.

I’m going to get in contact with the dev as this is the second time I’ve run into issues because of whitespace in the source code.

 

Broken Digital Pocket Scale – Troubleshooting and Repair

This is an off-beat post, and has nothing to do with websites or the digital world for that matter. I’ll be going through the steps I used to fix a broken pocket scale that was gifted to me – I get a lot of, “If you can fix, it it’s yours” gifts.

This 50.00g digital scale stopped working for an unknown reason, and the top suggestion for fixing these scales is a re-calibration. Unfortunately, this digital scale could not be calibrated – likely a result of the problems it was already having. After further inspection I realized the scale still accurately measured negative values. At this point the, “if it’s broken and destined for the garbage, I had might as well see how it works.” Was running through the back of my head.

Check the video out for a quick little tutorial and walkthrough of how I got my scale back in mostly working order. Step-by-step below.

  1. Remove the top plate of your scale to gain access to the mounting points of the weight surface.
  2. In my case there were two Phillips screws
  3. Flip the scale and remove the battery cover to reveal the second mount point
  4. Remove that pair of screws and set them aside as well
  5. Under where the weigh platform was, flip the sensor bar
  6. Re-attach all components

The kicker is, now when I lift the weighing platform, it shows me a proper positive number – reversing the fix brings the problems back. Does anyone with more knowledge of digital circuitry have an explanation for this rogue resistor?

Stop Youtube from Asking to Use Your Real Name

UPDATE: Unfortunately, this doesn’t quite work anymore.

So you’re sick and tired of Youtube’s popup asking, “Do you want to use your real name with your Youtube channel?” No? How about the part where when you check ‘no’ and are greeted with, “Okay, we’ll ask you again later.

Here’s my quick tip to keeping your Google account separate from your otherwise anonymous Youtube account.

For this you will need a modern browser like Chrome, Firefox, Safari, etc. (which you should have anyways… please?) and the Ad-Block Plus Extension. It’s simple as far as implementation and will only take a minute after you’ve installed the extension.

How To

Going into your Ad Block Plus settings by right clicking on icon will open a dialog.

ad-block_Chrome

Go to the custom filter list in the options panel and select, “Manually edit filters” and add the line: ||s.ytimg.com/yts/jsbin/www-linkgplusdialog*

Click for a larger view.

Click for a larger view.

Don’t forget to add the “||” as they act as a catch all for http://, https://, and www prefix, which saves you from making three or four rules for one blocking.

Bonus: Block Video Annotations

||youtube.com/annotations_invideo*
Adding the line above to your custom filters will hide annotations in all Youtube videos, even while logged out.

Untethered Jailbreak with “evasi0n – iOS 6.0-6.1.2 Jailbreak” on a Windows PC

Jailbreaking iPhones is nothing new, nearly any and all handheld apple devices have had a crack of some sort available since  2007. Software based cracks started popping up in 2008, with a lot of the early work being done by George Hotz.

The actual jailbreak process is extremely straightforward. Only a few steps are required…

We’ve come a long way since the early days, with the ability to jailbreak in under five minutes, as well as with a one click solution through your iOS device’s browser. Despite the ease of use, the more recent iterations of the iPhone have closed the security breach that allowed for websites like www.jailbreakme.com to work. For that reason, I’ll be using the evasi0n – iOS 6.0-6.1.2 Jailbreak to free an iPhone 4 16gb running OS 6.0.1 baseband 01.59.00*. The phone is carrier locked and the owner will be leaving for Europe shortly, and they need an internationally functioning phone.

download_evasi0n_jailbreak

Preparing to Jailbreak

There are a few requirements before you can begin unlocking an iOS device with the Evasion Jailbreak.

  1. You need a suitable machine to perform the jailbreak with, supported operating systems include: Windows, Linux, and Mac OS.
  2. iTunes needs to be installed on your computer of choice.
  3. Your iOS device needs to be updated to at least iOS 6.0
  4. You need to have downloaded the Jailbreak executable, available here.
  5. An extraction tool to get the files from the download, I suggest WinRAR by RARLAB.
  6. You should back up any device before you jailbreak, should something go wrong.

Jailbreaking Process

The actual jailbreak process is extremely straightforward. Only a few steps are required to successfully jailbreak you iOS device using the evasi0n jailbreak.

Requirements

Ensure you meet all of the requirements listed above. Install iTunes, backup your iOS device (iPhone 4 in this case), and download the jailbreak tool.

Extract

Extract the executable file to your desktop (or wherever is convenient) for later use.

Extract the executable file by dragging and dropping onto your desktop (or wherever is convenient) for later use.

Connect

Connect your iPhone or other Apple iOS device to your computer via usb/proprietary connector. Ensure your computer recognizes that your device is plugged in.

Run

jailbreaking-process-zachary-melo

From this point forward, we will not be touching iTunes or the iPhone until explicitly told to do so. Double click on the evasi0n icon that you’ve extracted and allow the program to run (if a dialog box appears). You will see the image above (less the bits about being jailbroken already), and if you read carefully – you’ll see that evasi0n is already scanning your phone’s software to see if it’s compatible. If everything is good, you can proceed with the one-click install of the jailbreak. Simply click on the button to the right and let the program do it’s thing.

In about five minutes you will be prompted to unlock and press a new icon on your apple device. After doing so, the device will power cycle several times. At this time, you can boot up Cydia App manager, which will again reboot your system. Cydia allows you to install third party applications on your Apple device, you are now free to download unapproved apps and tweaks not officially approved by Apple. This includes the tool we’ll be using to break our carrier sim-lock.

Carrier Sim Unlocking

UltraSn0w

Open Cydia and tap on the Search icon, and search for UltraSn0w – download and install this package. From here we will need to add an additional repository to our Cydia application. To do this we:

  1. Open Cydia’s home page by closing and opening the app
  2. Tap on the Manage icon found in the bottom bar
  3. Tap on the Sources button in the middle of the screen
  4. Tap on the Edit button found in the top right hand corner of your screen
  5. Click on the Add button that appears in the top left of the screen
  6. Type into the text box, http://repo.iparelhos.com”
  7. Tap the Add Source button
  8. Once the operation completes, tap the Return to Cydia button found at the bottom of your screen (you may have to scroll)

Go back to your Cydia home screen and pull up the search function again by tapping the Search icon found in the bottom right corner of the screen. Search for Ultrasn0w Fixer for your OS version, and install this application. In my case, I’ll be using the Ultrasnow Fixer for 6.0.1.

That’s all, you should be unlocked and ready to go. If this doesn’t work, chances are your baseband version is too recent. If that’s the case, you’ll have to visit http://www.unlockboot.com/2012/10/jailbreak-ios-6-iphone-4-iphone-3gs.html for a tutorial on how to use RedSn0w.

Following RSS Feeds with Mozilla Thunderbird

So I know many people see the RSS feed logo on a daily basis and have no idea what it does, or why it exists. RSS stands for rich site summary,  and does exactly what the name implies – provides a detailed summary of what is happening with a blog, news feed, or website in general. Most people use RSS because it can streamline a user’s daily news. Instead of visiting all of the blogs I enjoy to check for new content, or signing up for newsletters, I can have news and posts piped right into my RSS client. In this case I’ll be using Mozilla’s discontinued Thunderbird mail and feed client. I love the program as a free offline mail program, for it’s scheduling ability, and feed following, did I mention it was free? Get it here.

This is an RSS icon, you've undoubtedly seen it before.

This is an RSS icon, you’ve undoubtedly seen it before.

  1. Start by launching Mozilla Thunderbird
  2. Press alt to bring up your menu bar
  3. Navigate to File > New > Other Accounts…
  4. Select ‘Blog & News Feeds”
  5. Next
  6. Name your feed, I choose names based on how it will help me sort the feeds
  7. Next and finish
  8. In your left bar you should now see your new account, click on it
  9. Center top of your screen, click on “manage subscriptions”
  10. Paste or type in your feed URL
  11. Finish by clicking add
  12. Browse your new feed by clicking on it’s name in the left panel
  13. Double click a post title in the center window to open it in Mozilla Thunderbird

Customizing Supersize JQuery

I was recently hired to create a slideshow for a customer’s display at trade shows. For me, the solution was simple… we kill the Batman. All joking aside, I knew exactly what I was going to do from the outset of this project.

The previous revision of this client’s presentation was a combination of circa 2008 hacks and flash. This combo together yielded a surprisingly well working slideshow with menus to select and sort shows. None of this content was dynamic in any way. With relatively short notice, there was no way I was to even salvage any part of the relic that was their past show.

I opted to use Supersized, an awesome jQuery plugin by Sam Dunn of One Mighty Roar.

supersized-screen

The unfortunate thing about Supersized is it’s method of serving images. It’s engineered to be user friendly and be easy to use for even the most inexperienced code monkey. In the packages latest release, Sam has included some demos that can safely be used as starting points. This is exactly what I did, cutting what I can only imagine to be more than a week of work out of the project. This gives me more time to focus on the fine details and saves my customer money all the while – we both win.

When you download the supersized.x.x.x.zip file and open it up, you will see this:

supersized-tree

Thank goodness for logical naming conventions, this folder is pretty self explanatory. Core holds the most stripped down version of the Supersized slider, while Flickr offers a slider that will pull content from a Flickr feed, and slideshow is the folder we’re after. As a side note: please take time to read and follow the directions as well as licence agreements included with any plugins or work that aren’t completely yours.

The Code – Default Behaviour

The first chunk of code we’re looking for can be found in demo.html

slides : [ // Slideshow Images
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-1.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'}
]

This is where the average user would manually enter all of the file names, locations and properties for each slide. We’re going to modify this chunk of code to scan a directory for images, and then output the images into this list. To do that we will have to use PHP. If you don’t have a server to test and develop on (I don’t blame anyone), you have no excuse to not be using XAMPP. XAMPP will emulate a server environment (sort of) on your own local machine, allowing you to work with PHP and databases. I choose to use XAMPP for this project for several reasons.

  1. Connectivity at trade shows is an unknown factor. 
  2. Serving large high-resolution photos remotely is slow and gobbles bandwidth.
  3. By keeping files totally local, there is little to no need to account for security in PHP used.

The Code – Dynamic Behavior

Our PHP will look like this, explanation as we continue.

slides  :[<?php  	  
$directory = "/img/kitchens/";   	 
$directory_thumbs = "/img/kitchens/thumbs/";    	 
$images = glob($directory . "*.jpg");   	 
$images_thumb = glob($directory_thumbs . "*.jpg");  	 
$images_final = array_combine($images,$images_thumb);  	 
foreach($images_final as $image = $key) 		 
{ 		   
echo "{image : ' $image ', title : ' $image ' , thumb : '$key' },";	 		
}?>]

Line 1 shows that we are opening a section of php code within our page – <?php to open, ?> to close.

Lines 2, and 3 we are establishing our variables. We set where we can find the images to be used in our slideshow, and where their thumbnail images are.

Line 4 runs a command that will scour our directory that we set, looking for all files (the asterisk *) with a ‘.jpg’ at the end. Whatever files are found, are then saved to an array as the variable $images. Line 5 runs the same command for the thumbs folder.

Line 6 is where the magic starts to happen, both arrays – one for whole images, the second for the thumbnails – are combined into one array. It’s important to note that the number of files in both folders (arrays) need to be identical, otherwise the arrays cannot be combined.

Line 7 begins a foreach loop that goes through the array and for every item, gets the combined contents in order and echos them as lines that mimic our starting JavaScript.

There you have it, dynamically loading content for your slideshow.

Polishing and Future Posts

One note to make is that the naming of each file will simply be the file name as it is on your server. You can correct this with PHP’s trim and str_replace.

slides  :
[<?php  	
$directory = "/img/kitchens/";    	
$directory_thumbs = "/img/kitchens/thumbs/";    	
$images = glob($directory . "*.jpg");   	
$images_thumb = glob($directory_thumbs . "*.jpg");  	
$images_final = array_combine($images,$images_thumb);  	
foreach($images_final as $image = $key) 		
{ 	
$name= $image;
$name-chop= trim($name, $directory);
$name-chop= trim($name-chop, ".jpg");
$name-chop= str_replace('_',' ', $name-chop);

echo "{image : ' $image ', title : ' $name-chop ' , thumb : '$key' },";
} 	?>]

These new lines must go inside of the for each loop so that the variable is refreshed with every pass of the array. Trim does exactly what it sounds like, trims what you give it. In this case it’s removing the directory path from the name of the file, and then the .jpg at the end of the name. Str_replace is capable of replacing a string of characters with another string (or nothing at all). In our case, I’m converting the underscores in file names to spaces. With these changes, the file “images/A_burning_page.jpg” will now be titled “A burning page.”

This article will be referenced in the near future when I get into explaining generating a full gallery/list of slideshows based on folders of images. Follow my RSS and comment for further help.