≡ Menu

Completing the Core iOS 7 Code School Course Using XCode 6.x

One of the classes that must be completed on the iOS Path for Code School is Core iOS 7. When this course was published, version 7 was the most recent iOS release and the IDE used was XCode 5 from Apple.

This course may be done using XCode 6.x, and most of the exercises will run on the iOS 8/8.1 Simulator that comes with this version of XCode. However, due to some changes between iOS 7 and iOS 8, some of the exercises will successfully compile and run, but the associated tests will fail.

The solution to this problem is that the iOS 7.1 Simulator must be added to XCode 6.x. This is done through XCode Preferences on the Downloads tab. If you are using a MacBook Pro or MacBook Air, make sure that it is plugged in before attempting to download anything through the XCode Preferences interface. If you are running on battery, the download never starts and no error message or warning is given.

Also, before selecting Test in your application, make sure that the active scheme is a device running iOS 7.1. The iPhone 6 and 6 Plus options only run on iOS 8, so choosing “iPhone 5s (7.1)” should work fine.

Errors Related to the Use of CFAJAX Tags in ColdFusion

This is a quick change that is easily missed when adding AJAX functionality to an old ColdFusion site with CFAJAX tags. In my case, I was adding this functionality to a site that had originally been developed about ten years ago. This site runs on a Windows server with IIS.

After getting the site upgraded and working properly in the dev and test environments, I discovered that several errors were happening in prod that never happened in test or dev. The most common of these errors was “Coldfusion is undefined”.

Of all things, the Virtual Directory to CFIDE had never been created. As is so common, major problems can be caused by tiny bugs in code, or in this case, in the Web server configuration itself.

Create a Virtual Directory in the root of the website and name it CFIDE. It should, in most cases, point to C:\inetpub\wwwroot\CFIDE. Once this is done, the CFAJAX errors should be no more!

UPDATE via Gavin Pickin (@gpickin):

Using PHP to Scrape the Report Card from a Code School Profile – Part 2

Earlier this week, I described how to use PHP to scrape the report card from a Code School profile. Now, it must be displayed. I chose to display mine in the sidebar of my blog. To do this, jQuery and CSS will be your friends. It’s pretty simple, and this isn’t the only way to do it. However, in this implementation, it is important that the name of the querystring parameter used in the PHP script (in this case, “nick”) matches the one in the jQuery function call below. Likewise, the id attribute of the div element must also match the one in the jQuery statement.

<style scoped>
#codeschool {
   text-align: center;
   vertical-align: middle;
}

.badge-img {
   height: 110px;
   weight: 110px;
   display:block;
   margin-left: auto;
   margin-right: auto;
}

.pr-avatar {
   display:block;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 10px;
}
</style>
<div id="codeschool">
</div>
<br />
<script>
(function($) {
$("#codeschool").load("/codeschool/codeschool.php?nick=DeepInTheCode");
})(jQuery);
</script>

Well, that’s it. If you debug the client-side code on both your page and the Code School profile page, you’ll see that there are path elements in the Code School script that cause the partial opacity on uncompleted paths. This is presumably done with other JavaScripts and CSS on the Code School site. I haven’t tried bringing that functionality here as yet. Perhaps for another time…

Using PHP to Scrape the Report Card from a Code School Profile – Part 1

I have been manually placing my Master badges from Code School onto my blog which, being a WordPress blog, runs on PHP. I don’t have the script running that shows the fraction completed on Paths that I haven’t yet mastered, but I can get the ones that I’ve completed.

The PHP script I’ve built so far is below. Due to some CSS I want to change, I haven’t implemented it yet. But I can say that it does indeed scrape the page. The jQuery required to display it in the sidebar I’ll share once I get the CSS issues worked out. This is very similar to the code I used to get the CodeEval profile, but it’s been refactored and modified for use with the Code School page.

<?php
    function getClass($classname, $htmltext)
    {
        $dom = new DOMDocument;
        $dom->loadHTML($htmltext);
        $xpath = new DOMXPath($dom);
        $results = $xpath->query("//*[@class='" . $classname . "']");
        return $results;
    }
    
    
    function buildContent($results)
    {
        $content = "";
        foreach ($results as $node) {
            $partial_content = innerHTML($node);
            $content = $content . $partial_content;
        }
        return $content;
    }
    
    
    /* this function preserves the inner content of the scraped element. 
    ** http://stackoverflow.com/questions/5349310/how-to-scrape-web-page-data-without-losing-tags
    ** So be sure to go and give that post an uptick too :)
    **/
    function innerHTML(DOMNode $node)
    {
      $doc = new DOMDocument();
      foreach ($node->childNodes as $child) {
        $doc->appendChild($doc->importNode($child, true));
      }
      return $doc->saveHTML();
    }
    
    
    $previous_value = libxml_use_internal_errors(TRUE);
    $profilename = $_GET['nick'];
    $profile_url =  'https://www.codeschool.com/users/' . $profilename . '/';
    $context = stream_context_create(array(
        'https' => array('ignore_errors' => true),
    ));
    $html = file_get_contents($profile_url, false, $context);  

    $class = 'bucket';
    $resultsBucket = getClass($class,$html);
    
    $class = 'mbl tac';
    $resultsMaster = getClass($class,$html);
    
    $class = 'pr-pathStatus';
    $resultsPath = getClass($class,$html);
    
    libxml_clear_errors();
    libxml_use_internal_errors($previous_value);
?>

<a href="<?php echo $profile_url; ?>" target="_blank">
    <div class="wrapper-scores">
        <?php
        $full_content = "";
        
        $full_content = $full_content . buildContent($resultsBucket);
        $full_content = $full_content . buildContent($resultsMaster);
        $full_content = $full_content . buildContent($resultsPath);
        
        /* changing h2 tags to h1 tags and inserting line breaks */
        $full_content = str_replace("<h2","<br /><h1",$full_content);
        $full_content = str_replace("</h2>","</h1><br />",$full_content);
        
        /* disabling the anchor tags on each badge by changing to divs */
        $full_content = str_replace("<a href","<div class",$full_content);
        $full_content = str_replace("</a>","</div>",$full_content);
        
        /* changing text on heading of Path Status */
        $full_content = str_replace("Path Status","Paths In Progress",$full_content);
        
        /* return the html */
        echo $full_content;
        ?>
    </div>
</a>

Accessing the Google Foobar Challenges on Chrome

Last night I was Googling Python lambda functions and a strange thing happened. The Google search results window broke open near the top and a single line of white text appeared on a black background asking if I wanted to take a test, next to a link to google.com/foobar. After clicking on the link, I was able to login and got a shell prompt.

For some reason, some letters could be typed, but others had no effect. Initially, I was using Chrome as my browser. On Safari, I found that I could type anything there.

Ironically, Chrome’s malware defenses affect the functionality of this page. If you want to use Chrome to do the Foobar challenges, you must uncheck the “Enable phishing and malware protection” under Advanced Settings in Chrome. Some other ad blocking or malware-related extensions may also need to be turned off if this doesn’t fix the problem.

Using CSS to Create Resizable Columns in WordPress with Thesis Theme

Given that most monitors today are not 17″ CRTs, I decided to change the default width for the content column on this blog such that more of the screen is used. I didn’t want to affect the width of the sidebar.

I am using the Social Triggers Skin on the Thesis 2 Theme; YMMV. The blog content width is changed in the Skin CSS under “.landing .container”, the right-hand sidebar is (predictably) in “.sidebar” and both inherit from the block “.container”.

To change the Skin CSS, go to the WordPress admin dashboard, and navigate to Thesis –> Skin Content –> click the Skin drop-down button and select Editor. On the resulting page, click the Home button and select Page. Now click the CSS button at the top of the page. This will display the CSS template for the Skin.

The CSS that must be changed is near the top of the template:

.container {
	width: $w_total;
	margin: 0 auto;
}
.landing .container {
	width: $w_content;	
}

If you’re new to Thesis, you may find these values strange; they are variables. On the right-hand side of the page, you will see a list of all the variables that can be used here, with the option to create more.

The default values that I was concerned with are as follows:

$w_total: 897px
$w_content: 585px
$w_sidebar: 312px

Since I did not want to change the width of the sidebar, I did not show the CSS code here where that last variable is used; I do not need to change this one, but I do need to know its name.

I wanted to make the default values in CSS be the minimum widths allowed, but otherwise to allow the content column to fill much of the screen. By clicking on the variables in the right-hand pane, dialog boxes for changing the values appear. I changed the existing variables and added new ones like so:

Existing:
$w_total: 80%
$w_content: calc(100% – $w_sidebar)

(Notice the use of the calc() CSS native method in the $w_content value!)

New:
$w_total_min: 897px
$w_content_min: 585px

After changing the value in the dialog box, click Save to save the new value. The CSS template now must be modified. The changed CSS is:

.container {
	width: $w_total;
	min-width: $w_total_min;
	margin: 0 auto;
}
.landing .container {
	width: $w_content;
	min-width: $w_content_min;
}

Nota bene: If you also want to change the width of the sidebar, just change the $w_sidebar variable value. It can be a static number, or a percent value. If the sidebar is set to a percent value, I recommend adding a min-width value for the “.sidebar” class in the CSS template as well.

Be sure to click the Save CSS button on the Skin CSS page once you are finished.

Now, the content and sidebar columns together take up 80% of the width of the window, but if the window is shrunk, the content column will not get smaller than its original default size!

Happy New Year!

I was able to finish 2014 by completing the JavaScript Path on Code School, and am back to working on the Ruby Path. Rails For Zombies Redux at Code School is a free course, so even if you don’t have a subscription, you can work through this one just to try out the format without paying for it. Have a happy and productive 2015!