There’s social, and then there’s smart social

I’m still learning the nuances of blogging. I like the titles without capitalization.

The two social media outlets I added to my blog menu most recently, Tumblr and Research Gate, lie at opposite ends of the intellectual spectrum. I have yet to train Tumblr that my interests are software development and computer science. Tumblr seems to be a kind of less efficient Twitter. A couple of searches for my favorite programming languages and frameworks turned up nothing. Other searches turned up an account or two on HTML5 and CSS. I don’t think I’ll be spending my time there.

Research Gate is where academic types go to publish everything from technical papers to peer reviewed journal submissions. I’ve had an on-again, off-again affair with academic publishing going back to my Masters thesis in 2000. One of the things I liked about working for Sun Microsystems was the emphasis they placed on data-based research and relationships with university scientists. I recently dusted off (figuratively) an old paper, Scaling Mathlib on Sun Fire Servers, that I cowrote with another engineer at Sun Microsystems, and published it on Research Gate. Even though performance characteristics of 900MHz CPUs is an outdated topic, I am still quite proud of this work. I had to do some work to translate it from StarOffice (Yikes! Old!) to Word. There was quite a bit of temptation to tighten up the wording in places, but I resisted.

One thing that annoys me about Research Gate is the link to my profile. You seem to need a registered account to see another researcher. Even worse, if you try to go to my link and you don’t have an account, you are taken to an unhelpful index site. That’s weird, and I don’t understand it.

Anyway, click the link above if you want to see the paper. ?

Git for WordPress Deployment

There are a few good tutorials out there on deploying web sites using git. Many professional web developers use git to deploy updates to their test sites and customer sites. There are a few reasons why git is a fit for these tasks:

  1. Git tracks file changes and transfers only the necessary objects
  2. Git supports a number of protocols to talk to your web server, including ssh for security
  3. Git has hooks for automatically running scripts at various points to check file permissions, etc.
  4. Git can easily be configured to ignore files that do not need to be moved back and forth
  5. You’re already using git to revision and manage your code changes, so why not deploy with it?

But there are issues :

  1. Git repos do not belong on your public server, since you only want your customer to have access to the latest versions
  2. Git has a steep learning curve

My web server gives me SSH access, which is key to my deployment technique. Logging into an interactive terminal on the server, I set up a folder to hold git repos, outside of the public-facing html folder, which serves to ensure that my git is hidden from users. To put the web source files in one place and the repo in another, I need to initialize what is called a bare repository in git. This is the command :

git init –bare

And this is the resulting directory structure:

Screen Shot 2016-06-10 at 10.59.34 AM

Next, I want to create a way to push changes to my public server. Git provides hooks for automating common software development tasks. These hooks can be executed before or after several stages of git operations. The post-receive hook will be run every time code changes get pushed to the server git repo. The following two-line script will update the files under html every time I push updates to the git repo:

#!/bin/sh
GIT_WORK_TREE=/path/to/html checkout -f

To make this run on the server automatically at every code check-in, I name it post-receive (no file extension), make it executable, and place it in the hooks folder in my git repo. The GIT_WORK_TREE variable assignment is needed to tell git where the live code lives, since a bare repo keeps code and history separate from each other.

On the client side, I create a git repo and assign the web server as a remote.

git init
git remote add public ssh://user@server.com/path/to/git/repo
git push –set-upstream public master
git push public +master:refs/head/master
git config –global push.default simple

Did the double-dash (dubdash, heh) come through up there? “–set-upstream” and “–global”. Anyway, these git settings set up the remote repo and ensure that I can push and pull code without any extra commands. I choose to name my web server public within git to reflect the fact that a push will publish the site.

From here, I can create my site code. A single push command will publish my site!

If a web site is maintained by multiple web developers on their client machines, this model works very well. Everybody pushes updates to the central git remote repo, and every user can pull recent changes using

git fetch
git merge

But, what if someone is making changes on the server directly? This is exactly what happens with WordPress. Uploaded images and plugin installations cause changes in the html folder that we want to track in our git repo. I could not find a git hook to automatically capture these changes, so I created a script on the client to automatically checkin new changes at the same time I pull them over to my client:

#!/bin/bash

HOST=user@server.com
GIT_REPO=/path/to/git/repo/
GIT_WORK_TREE=/path/to/html/

set -e

ssh $HOST "
cd $GIT_REPO; 
GIT_WORK_TREE=$GIT_WORK_TREE git add -A;
GIT_WORK_TREE=$GIT_WORK_TREE git commit -m 'Commit by pullall';
"

I run this script before running

git fetch
git merge

This all makes for a nice backup/tracking system. The WordPress posts are stored in a SQL Database, of course, so that system must be backed up separately.

Are there better tools than git for this job? Leave a comment and give me your opinion!

WordPress: Why Learn Anything Else?

I am feeling very comfortable with WordPress these days. I just finished putting some touches on a theme for a community site (links to come later) without doing any actual theme development or PHP coding. The key is finding the right plugins, using the browser inspector, and mastering CSS. My wife & I were able to implement a multi-page site (with content at the ready – important! ) in just a day or two.

We started with the Poseidon theme for a clean layout, then added Better Font Awesome for Facebook icons, Easy Google Fonts for a great selection of fonts, Image Widget to put images in the sidebar, and Jetpack for custom CSS. Jetpack requires a WordPress account for full functionality. After creating pages, menus, and the sidebar, all that’s left is to improve some of the visual artifacts.

Here, the web inspector in your favorite browser is your friend. Once you identify element ids and classes, you can easily craft CSS to move and modify visual items. I made the following tweaks to the theme:

@import  """""""""""""""""""""""""""""""""""""""""""""'http://fonts.googleapis.com/css?family=Ubuntu'""""""""""""""""""""""""""""""""""""""""""""";
@import  """""""""""""""""""""""""""""""""""""""""""""'http://fonts.googleapis.com/css?family=Raleway'""""""""""""""""""""""""""""""""""""""""""""";

/*
Welcome to Custom CSS!

To learn how this works, see http://wp.me/PEmnE-Bt
*/
	
}

nav ul li a {
	font-family: 'Ubuntu', Tahoma, Arial !important;
}

.site-title a {
	font-family: 'Ubuntu', Tahoma, Arial !important;
}

This bit simply sets up the fonts to taste. The theme has built-in font configuration, but the theme configuration menu only supports font selection for paragraphs and headers. This leaves list items displayed in an arbitrary font! I tried to pry open the theme customization api elements in the PHP code for the theme, but I gave up. It’s just too easy to fix this in CSS.

@media (max-width: 624px) {
	.main-navigation-toggle {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
	}
	
	h1.site-title {
		width: 80vw;
	}
}

This bit fixes an issue with small displays. On an iPhone, the title was wrapping around to two lines and pushing the hamburger menu down even further. The result was ugly. This CSS reduces the site title to 80% of the screen width, leaving room for the hamburger menu icon (.main-navigation-toggle). Setting the icon position to absolute and pinning it to the top right corner of the page puts it exactly where we want it.

.color1 {
	background-color: #ddd;
}

.color1 > * {
	margin-left: 10px;
}

.color1 > .button {
	margin-left: 0;
}

Several pages have embedded forms, and we wanted those to pop out a bit. This CSS, together with some help from the Text mode of the page editor, gives those embedded elements a gray background, distinguishing them from the plain white background of the rest of the page.

#menu-social li {
	list-style: none;
}

Menus display in the sidebar as a list of links. This code removes bullets from the list items.

.myfacebook a::before {
	font-family: "FontAwesome";
	font-size: 20px;
	content: "\f082";
	padding-right: 10px;
}

This is one of my favorite tricks with FontAwesome! It places the Facebook icon to the left of Facebook links, provided that they have the right class property value. To specify the link class, go to Screen Options on the Menu WordPress page, and check CSS Classes. You can give each menu item a custom class. You’ll need the FontAwesome short codes.

News Media and Technical Topics (Facebook Encryption)

A news story has been rehashed many times today, usually summed up as “Facebook is going to support ENCRYPTION”.
 
Ugh. That’s not even close to correct.
 
Facebook already supports end-to-end encryption. If you see “https” or a padlock on your browser, you are already using Transport Layer Security, which means this : Everything is encrypted.
 
The original Guardian article says that the rumor is ___tougher___ encryption, which could mean a lot of things. Maybe a harder-to-crack algorithm, or a promise from Facebook that the messages will be stored encrypted on their own servers, which they currently are not (probably).
 
That last possibility is significant, since storing encrypted data would mean that Facebook would not be able to hand over messages to anyone due to hacking or court orders.

Book Critic

I don’t like to step on anyone’s work. Having taught university computer science for a decade, I can tell you that it is difficult to present technical material in a way that is both correct and engaging. My students’ surveys remind me every semester that 100% satisfaction is elusive. But I want to critique the writing style of a book on Swift that I just browsed at Barnes and Noble. If you are easily tripped up on vague or ambiguous descriptions, please know that we share this obsessive trait.

See the section subtitled Building Blocks of Swift, in bold? It establishes the very basic programming concept of named storage, called variables in most material even if their values never change. The unchanging named values are also called constants. In Swift, these named values are declared with the syntax var variableName=value for variables and with let constantName=value for constants.

These are my complaints :

  • The first paragraph explains variables and constants, but only gives the keyword var for variables. What about let for constants? This leaves me hanging.
  • The sample code below P1 is obviously not illustrative of the example described, even though it prefaces the code with “as shown in this example:”.
  • The sample code below P1 contains errors! The reassignment of the constant will break at compile time. Syntax errors, while useful for examples, must be flagged clearly so that the reader does not struggle trying to figure out the code!
  • The last example in that section says that you can omit the var keyword, yet we clearly see the var keyword in the example code given. It is more clear to say that we can omit additional var keywords when declaring multiple variables.

So, buyer beware.

CERT, C, and Swift

Swift does not do implicit type conversions between integers of different sizes and signages. By contrast, Java does implicit conversion, but with less risk of unexpected effects due to the lack of unsigned integer types. C, that dinosaur, has a strange and secret show behind every elementary school math operation.

Why is type conversion confusing? I’ll use C as my example. CERT has some of the best low-level down-and-dirty descriptions of the language, so I’ll be borrowing heavily from their examples.

We’ll start with an easy one: Promotion. During arithmetic, everything is automatically promoted up to int or uint (32 bits on most platforms) in order to prevent overflow. It is curious that they don’t promote to something bigger (long), but x86 assembly uses 32-bit registers most of the time, so it’s a natural fit.

        // Example Apple : Integer Promotions
        unsigned char appleCharOp1, appleCharOp2, appleCharOp3;
        unsigned char appleCharResult;
        unsigned char appleCharWrongResult;

        appleCharOp1 = 80;
        appleCharOp2 = 70;
        appleCharOp3 = 100;
        appleCharResult = appleCharOp1 * appleCharOp2 / appleCharOp3;
        appleCharWrongResult = (unsigned char)(appleCharOp1 * appleCharOp2) / appleCharOp3;

If we run this in the debugger, using the lldb command type format add –format “unsigned dec” “unsigned char” for clarity, we see the following:

(lldb) frame variable

(unsigned char) appleCharOp1 = 80

(unsigned char) appleCharOp2 = 70

(unsigned char) appleCharOp3 = 100

(unsigned char) appleCharResult = 56

(unsigned char) appleCharWrongResult = 2

The correct answer is the result of being able to hold the intermediate product, 5600, in a 32-bit variable. If you truncate the intermediate product to 8 bits, you get 0xE0, which is 224. Divide this by 2 gives you after rounding.

Mind you, the end result is that you get the expected answer as long as you don’t stick a weird cast in the middle like I did there. But here is an example where you get the wrong answer without any extra work:

        // Example Cantaloupe
        unsigned int cantaloupeInt1 = UINT_MAX / 4;
        unsigned int cantaloupeInt2 = UINT_MAX / 8;
        unsigned int cantaloupeInt3 = UINT_MAX / 16;
        unsigned long long cantaloupeLongLong1 = cantaloupeInt1 * cantaloupeInt2 / cantaloupeInt3;

Results are

(unsigned int) cantaloupeInt1 = 1073741823

(unsigned int) cantaloupeInt2 = 536870911

(unsigned int) cantaloupeInt3 = 268435455

(unsigned long long) cantaloupeLongLong1 = 10

That’s the wrong answer. You get the right answer if you cast each term to (unsigned long long).

There are many other factors to C integer conversion, such as precision and rank, but these examples suffice to show why it’s a tricky subject.

Enter Swift’s design choice. If you try the same basic code in Swift :

let cantaloupeOp1 : UInt32 = UInt32.max / 4;
let cantaloupeOp2 : UInt32 = UInt32.max / 8;
let cantaloupeOp3 : UInt32 = UInt32.max / 16;
var cantaloupeResult : UInt64 = cantaloupeOp1 * cantaloupeOp2 / cantaloupeOp3

It simply refuses to compile. The operations on the right are legal, but the assignment is not.

Swift is Here to Stay

There are a few pockets of the internet complaining that Swift is not ready for production yet. I dive into these half expecting to see complaints about the changes in Swift 2.2, the rapidly changing standards, etc. Instead, those professional developers who are complaining are warning about lack of binary compatibility between old and new frameworks.

I am not deterred. I’m into Swift now.

This post is short on content. The plan is to follow Apple’s guide to grok basic syntax, followed by Ray’s guide on style to get the latest and greatest best-practices.

After that, the pickin’s get slim because I’m jonesing for Metal tutorials. Good news is that Jacob Bandes says that it makes more sense than OpenGL or CUDA. We shall see, we shall see.

Giving Hipwords some GPL Love

GPL has not always been my favorite license. This feeling got worse when my daughter’s Minecraft server got shot down by a DMCA takedown of the server code she was running. If you have never read about this, you probably should.

But I do respect copyright and licensing, big-time. And since my favorite-at-the-moment WordPress theme is licensed under GPL, I should probably do the right thing and post my minimal PHP changes here. And that also gives me a chance to test out Crayon Syntax Highlighter!

<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<?php if (is_front_page()) { ?>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<?php } ?>

<?php if ((!is_home()) and !(is_archive())) { ?>

<?php the_title( sprintf( '<h2 class="entry-title site-title"> Talks about ', es
c_url( get_permalink() ) ), '</h2>' ); ?>
<?php if ( 'post' == get_post_type() ) : ?>
<div class="entry-meta">
	<?php the_time('l, F jS, Y') ?>
	<?php the_category(', ') ?>
</div><!-- .entry-meta -->
<?php endif; ?>
<?php } ?>
<?php if (is_archive()) { ?>
<?php
		the_archive_title( '<h2 class="site-title"> Thoughts on ', '</h2
>' );
the_archive_description( '<div class="taxonomy-description">', '</div>' )
;?>
<?php } ?>

What you’re looking at are the modifications I made to header.php in order to change the site titles of all archive and search pages to something more egotistical. header.php and footer.php were the only pieces of the Hipwords theme that I had to override directly, rather than using the preferred WordPress theme extension mechanism : child themes.

Child themes are amazingly simply to use, and they quite frankly do more than I had a right to expect them to do. You simply create your own folder and create a functions.php and style.css in a way that has been described well in other spaces.

I exploited a surprising feature when I wanted to change just a small bit of the header and the footer : It turns out that if you copy any PHP file, like one corresponding to archive or static pages, from the parent theme into the child folder, the WordPress engine loads that file preferentially. I utilized this behavior to copy-and-modify the footer to make one final change…

<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'hipwords' ) ); ?>"><?php printf( __( 'Powered by %s', 'hipwords' ), '<b>WordPress</b>' ); ?></a>
<span class="sep"> | </span>
<a href="<?php echo esc_url( __('http://forbetterweb.com/', 'hipwords') ); ?>" title="<?php esc_attr_e('forbetterweb.com', 'hipwords'); ?>">
<?php printf( __('Theme: <b>HipWords</b> by %s.', 'hipwords'), 'ForBetterWeb.com' ); ?>
</a>

/* ... That was the old, here is the new ... */

> &copy; <?php echo date("Y"); ?> Michael Johnson

That’s right. I replaced their credits with the copyright notice. Well, it’s not like I’ve been quiet about how awesome Hipwords is!

Parting thoughts: I would really love to pass on this child theme, small though it may be, on to other software developers in need of a blogging platform. This would involve some up-front work and maintenance commitment on my part. Up front, I would need to finish customizing the theme and create a downloadable package to submit to the free WordPress repository. In maintenance mode, I would need to at least monitor security issues and make sure I did my part to keep the web safe. I’m not sure if it is worth the effort.

Have thoughts? Leave them in the comments!

The WordPress Ecosystem

WordPress is amazing!

I spent a lot of time over the past few months trying to settle on a blogging platform. For me, it is not a trivial matter of looking up features and reading opinions. I try before I buy. On my local drive there are many prototype sites written in more than a few languages slash frameworks. Over at http://jameecreations.com I exercised my raw HTML and CSS skills. Now that I have a WordPress site going, I find that those skills are helping me customize my theme just as I like it.

But before I get lost in code logistics, let me say what I came here to say: WordPress is awesome because of the amazing community of feature contributors. Between the plugins and the themes you have everything you could ever want from a modern, responsive site. No longer do I search for “how to do cool animated transition XYZ”. Now I search for “plugin for cool animated transition XYZ”, and there it is. Install it, configure it, I’m done.

http://wordpress.org and https://wordpress.org/themes/hipwords/ have made this blog a pleasure to create, and I cannot thank their creators and the creative community around them enough.

Now for some minimal coding logistics : A Child Theme (see https://premium.wpmudev.org/blog/how-to-create-wordpress-child-theme/ for great tutorials) enabled me to create a beautiful module loosely-coupled to WordPress and the parent theme. I was able to get a fun font from my name in the form of Lobster from Google Fonts. Another stylesheet resource, hooked into functions.php as with the previous, comes from Fontawesome. Using the :before pseudo-class along with the font-family: CSS property and the icon hex codes, I added cool icons to my menu for social links. This plus some other formatting choices in style.css make for a nice, modern looking software developer blog.

Finally(for now), I fixed a headshot on my page with minimal pain using an Image Widget (https://wordpress.org/plugins/image-widget/). Since the Hipwords theme comes with a widget-based sidebar, the process was easy and largely driven through the browser.

That’s it for now; more to come as I feature-up the site. I would include code, but I have yet to install that plugin. 🙂 Wait for a future post.