Konr Ness

Hosting this site on Google Cloud Run

Fri, 16 Apr 2021 13:18:18 +0000

Since 2009, this blog, among other personal projects, was hosted on a VM on Rackspace. The $20 per month I was paying finally got to me, and I decided to migrate it to a new host. I selected Google Cloud Run. To do that, I needed to repackage the site into a Docker Container and migrate the domain.

This site is built using Jekyll, which is a static site generator. I write the posts in markdown, and Jekyll transforms them into styled HTML. The site search is run with Javascript and a generated JSON site index.

Previously, I ran the Jekyll commands to build the site and manually uploaded them to the VM with SCP. I thought, if I’m going to migrate to a cloud native, containerized platform I should also replace the old-school techniques that I was using for build/release.

All of the code for this site, including the build/deploy process, is on Github.

Step 1 - Containerize the Build

The old way:

# deploy.sh
bundle exec jekyll build
scp -r _site/* venus@konrness.com:/vweb/konrness.com/docs/

The new way:

# build.sh
export JEKYLL_VERSION=2.5.3
docker run --rm \
  --volume="$PWD:/srv/jekyll" \
  -it jekyll/jekyll:$JEKYLL_VERSION \
  jekyll build

The benefits of containerizing the build process is that I no longer need to maintain a local Ruby installation and mess around with managing dependencies. Everything is built into the jekyll/jekyll Docker image and self-contained. When I’m done building, the container dies and nothing hangs around.

The result of this build is a new _site folder which is the static contents of the generated site, including directories, static assets (JS, CSS, fonts, etc.) and HTML files.

Step 2 - Create a deployable artifact

Now that I have the site generated, the second step of the build.sh script packages the code into a Docker container.

# build.sh (continued)

docker build -t konrness/konrness.com .

Since the site is entirely static, I am using the nginx:alpine Docker image to deliver the site.

The Dockerfile is as simple as:

# Dockerfile
FROM nginx:alpine
COPY _site /usr/share/nginx/html

This copies the static site from _site into the default web directory for the nginx container.

I can then run this Docker container locally to preview and test the site.

# run.sh
docker run -p 8080:80 -it konrness/konrness.com

Step 3 - Publish to Docker Hub

Once I have validated locally that the Docker image I have created is ready for release, I tag and push to Docker Hub and GCP Container Registry.

# release.sh
timestamp=$(date +%y.%-m.%-d)
 
echo Tagging version $timestamp
docker tag konrness/konrness.com konrness/konrness.com:$timestamp
 
echo Pushing tag: $timestamp
docker push konrness/konrness.com:$timestamp
 
echo Pushing tag: latest
docker push konrness/konrness.com:latest
 
echo Pruning...
docker system prune -f

The tag to be deployed is versioned based on the date. For instance, the tag I push on April 16th, 2021 would be named konrness/konrness.com:21.4.16. I push the tag to both Docker Hub as well as my personal Google Cloud Platform Container Registry because I am hosting the site on GCP Cloud Run, and Cloud Run does not support pulling Docker images from Docker Hub.

Step 4 - Deploy to Cloud Run

The last step of the release.sh script is to deploy to Cloud Run.

# release.sh (continued)

echo Deploying to Cloud Run
gcloud run deploy konrness-com --image gcr.io/personal-sites-310123/konrness.com:$timestamp --region us-central1 --platform managed

Easy as that.

What’s Next

This build and release process is currently entirely scripted, and only run on my local workstation. In a future iteration of this, I plan to implement a CI/CD solution that will automate the process for me. I’ll link to that here, when I get to it.

PHP: Your privates aren't as private as you think they are

Mon, 21 Nov 2016 13:29:18 +0000

In PHP, we have three visibility keywords:

public
protected
private

<?php
 
 class Student
 {
     private $classes;
 
     public function __construct($classes)
     {
         $this->classes = $classes;
     }
 
     public function getClasses()
     {
         return $this->classes;
     }
 }
 
 
 $mary = new Student(['CompSci2001', 'CompSci2002']);

In this example, we see private and public being used. The list of the students’ classes are readable externally, but once the student is instantiated the list of classes cannot be modified. This is because the classes property is declared private.

A quote from the PHP manual for Visibility, describes the visibility keywords:

Class members declared public can be accessed everywhere. Members declared protected can be accessed only within the class itself and by inherited classes. Members declared as private may only be accessed by the class that defines the member.

But pay close attention to the wording there: “may only be accessed by the class that defines the member.”

A common misconception is that these visibilities are object-level. But they are not; they are class-level.

Consider this example where one instance of a class modifies the other instance’s private properties.

<?php

class Student
{
    private $classes;

    public function __construct($classes)
    {
        $this->classes = $classes;
    }

    public function getClasses()
    {
        return $this->classes;
    }
    
    public function combineClasses(Student $otherStudent)
    {
        $allClasses = array_unique(
            array_merge(
                $this->classes, 
                $otherStudent->classes
            )
        );
        
        $this->classes         = $allClasses;
        $otherStudent->classes = $allClasses;
    }
}


$mary = new Student(['CompSci2001', 'CompSci2002']);
$john = new Student(['CompSci2002', 'CompSci2003']);

$mary->combineClasses($john);

Dude, what?

After seeing the previous example, you may be thinking that surely PHP screwed up it’s object-oriented implementation when it added visibility keywords in PHP 5? However, this same implementation of class-level visibility exists in other popular languages:

Java: Access level modifiers determine whether other classes can use a particular field or invoke a particular method.
C#: The type or member can be accessed only by code in the same class or struct.
C++: The private keyword specifies that those members are accessible only from member functions … of the class.

The basics tenets of object-oriented programming allow for this.

What does this mean to you as a PHP developer?

It’s important to note that the reason we declare class members as private is to make the class more encapsulated. Encapsulation allows for changing the internals of the class without affecting the code that uses your class. This still holds true with our new understanding about visibility, because the code that has access to your class’s private members is the class.

We can all agree that the typical object-oriented model of having classes represent real-world objects, and setting visibility to limit the outside world from modifying properties is good. When following the “classes describe the real world” technique, you can probably think of some realistic use-cases for exploiting class-level visibility. But like all powerful things, it is possible to do real harm when exploited.

How to strace a process that hasn't started yet

Thu, 29 Jan 2015 18:39:18 +0000

My personal server, which runs this blog, was recently hacked. I knew that the server was sending out a constant stream of spam email, but I didn’t know what process it was coming from. When I ran top I saw that a perl script was running but I didn’t know what it was doing, so I wanted to run strace on it.

With strace you can diagnose processes if you provide a process ID (PID), like:

strace -vvtf -p 1234

However, the perl process was ending faster than I could capture the pid to strace it.

Using the following script, you can provide the process name and it will wait until the process starts, and then strace it:

while true; do pid=$(pgrep 'processname' | head -1); if [[ -n "$pid" ]]; 
then strace  -s 2000 -vvtf -p "$pid"; break; fi; done

This technique can be used to run strace on processes that have an unknown PID or for running strace on processes that are ending before you can capture the PID.

My 2013 Goals to Learn New Technologies

Mon, 30 Sep 2013 16:39:18 +0000

That’s right, I’m setting goals for 2013 on the last day of the third quarter. But my current status warrants the urgency. I have been a PHP developer since I started at The Nerdery exactly 6 years ago this month. Within the first few months I learned Zend Framework (version 1.0.2 at the time). I have developed all of my projects since then in Zend Framework. In doing that I have come to be somewhat of a Zend Framework expert.

In addition to being involved in over 400 projects I have also taken on more of a management role as a Principal Software Engineer (PSE). I am now leading a team of 7 other PSEs. Our team is in charge of recruiting, mentoring developers, helping with sales and resourcing needs, and defining and enforcing standards, among other things. Doing all of these non-development things, along with my focus on Zend Framework 1, has caused me to miss 6 years of changes in web development.

Now with Zend Framework 1.x being sunsetted in 2014 and Zend Framework 2 being released, which at first blush feels very foreign to me, I find myself at a cross-road. I can either continue to float further and further away from actual programming and focus on management and project leadership, or dive back in and reintroduce myself to the new stuff.

Without further ado, here’s my list of technologies that I want to learn by the end of 2013:

Groovy on Grails
OpenStack, or other virtualization environments
Vagrant + Puppet/Chef
Varnish
Javascript MVC (Backbone, RequireJS, Underscore, Grunt)
MongoDB
Solr
Symfony2
Node.js
.Net MVC

Hmm, that’s a pretty long list. I probably won’t get to all of them by the end of the year. But if I can stay focused I will hopefully be able to reap the benefits by being more effective at my job and assuring my long-term career opportunities in the industry. I hope my friends and colleagues can hold me to it and help me achieve this goal.

PHP Session Locks – How to Prevent Blocking Requests

Fri, 17 Dec 2010 16:39:18 +0000

Many people are aware that modern browsers limit the number of concurrent connections to a specific domain to between 4 or 6. This means that if your web page loads dozens of asset files (js, images, css) from the same domain they will be queued up to not exceed this limit. This same problem can happen, but even worse, when your page needs to make several requests to PHP scripts that use sessions.

Problem

PHP writes its session data to a file by default. When a request is made to a PHP script that starts the session (session_start()), this session file is locked. What this means is that if your web page makes numerous requests to PHP scripts, for instance, for loading content via Ajax, each request could be locking the session and preventing the other requests from completing.

The other requests will hang on session_start() until the session file is unlocked. This is especially bad if one of your Ajax requests is relatively long-running.

Solution

The session file remains locked until the script completes or the session is manually closed. To prevent multiple PHP requests (that need $_SESSION data) from blocking, you can start the session and then close the session. This will unlock the session file and allow the remaining requests to continue running, even before the initial request has completed.

To close the session, call:

session_write_close();

This technique works great if you do not need to write to the session after your long-running process is complete. Fortunately, the $_SESSION data is still available to be read, but since the session is closed you may not write to it.

Example

<?php
// start the session
session_start();

// I can read/write to session
$_SESSION['latestRequestTime'] = time();

// close the session
session_write_close();

// now do my long-running code.

// still able to read from session, but not write
$twitterId = $_SESSION['twitterId'];

// dang Twitter can be slow, good thing my other Ajax calls
// aren't waiting for this to complete
$twitterFeed = fetchTwitterFeed($twitterId);

echo json_encode($twitterFeed);

Google Wave-style scroll bar jQuery plugin

Tue, 02 Nov 2010 16:39:18 +0000

Google Wave introduced a revolutionary new way of online communication and collaboration. It seemed to swiftly solve the problems inherent our current 40-year-old email system. Unfortunately, it never actually caught on.

In addition to rethinking email, though, Google Wave’s user interface also rethought things such as scroll bars. I was particularly impressed with Google Wave’s scrollbars which were small, unintrusive, and easy to use.

In it’s tiny form-factor, the Google Wave scroll bar is able to:

Indicate document height
Indicate current scroll location
Scroll by clicking the arrows (dragger doesn’t move until you move your mouse away)
Scroll by dragging

After being announced that Google Wave will be retired, I wanted to immortalize this new way of scrolling in a jQuery plugin that does the same thing.

View Demo

It currently does not work in IE because it uses CSS image data instead of referencing an actual image URL, but upon changing the image CSS, it will work in IE.

This is an alpha release, so please recommend changes or express your interest in a more configurable plugin.

How to Create Javascript Objects

Fri, 21 Aug 2009 16:39:18 +0000

It is easy to create Javascript objects, but this method goes one step further by allowing you to create a Javascript object with private and public methods, as well as private variables. It’s a perfect way to create a single access point for Javascript and Flash to communicate.

The project I’m currently working on requires heavy interaction between a Flash object and the HTML/DOM. Links on the page need to call methods on the Flash object, and events in the Flash object need to trigger actions on the page.

I decided to create a DOM/Flash Connector in Javascript that would expose all of the methods that each can call into the other. I wanted it to be fully encapsulated, and as object oriented as possible.

One example of what it needed to do was show extended content (in HTML) that the Flash object was not large enough to display. For example, when a photo is displayed within the Flash object, the photo’s title, description, comments, tags, rating, etc. is displayed in HTML below the Flash object.

Here is the method I chose to use:

var Connector = function(){

    var _flashElSelector = false;
    var _flashIsReady    = false;
    var _flash           = null;

    // load html into extended content area
    // this is a "private" method in the Connector class
    // it can only be called from within the returned object
    var _populateExtendedContent = function(url, data){
        $('#extendedcontent').load(url, data);
    };

    return {

        // initialize connector object
        // set the jQuery selector to be used for retrieving 
        // the Flash object element
        init : function(selector){
            _flashElSelector  = selector;
        },

        // flash is ready
        // flash calls this method as soon as it is ready to accept
        // incoming method calls
        flashReady : function(){
            // find flash object in DOM
            _flash        = $(_flashElSelector).get(0);
            _flashIsReady = true;
        },

        // show content for specified ID in extended content area
        showExtendedContent : function(id){
            // call the "private" method to display content in the
            // HTML part of the site
            _populateExtendedContent('/show/extendedcontent', {id : id} );
        },

        /**
         * Flash Methods
         */

        // show content for specified ID in Flash object
        showContent : function(id){

            // if flash isn't ready to accept method calls, ignore
            // this request
            if(_flashIsReady){

                // call the showContent() method on the Flash object
                // this is a method that is exposed by Flash that will
                // display content, based on the content's ID
                _flash.showContent(id);

                // call the showExtendedContent() method on the Connector
                // in this case, "this" refers to the same object as the
                // global "Connector" does
                // displays the extended content in the HTML area of the site
                this.showExtendedContent(id);

            }
        }

    }

// closure
}();

// set the jQuery selector for retrieving the Flash object
// this is done on the individual pages that have Flash to allow
// for different IDs for the Flash objects on each page
Connector.init('#flashobject');

If the user selected some content to be displayed within the Flash object, Flash would call to the connector as follows to display the extended information for the content in HTML.

Connector.showExtendedContent(5);

If the user selected some content to be displayed within the HTML part of the site, Javascript would call to the connector as follows to display the content in Flash and the extended information for the content in HTML.

Connector.showContent(5);

Note that since the function being assigned to Connector has the (); at the end of it (line 67), it gets executed immediately. This function then returns an object that contains several functions and is assigned to the Connector variable. All of the variables and functions within Connector, that are not returned, are private and inaccessible from the global scope, but fully accessible from within the Connector, as evidenced by line 36.

If you have any questions regarding the script please feel free to post them here in the comments. I’m sure there are many other ways of creating Javascript objects, so please share your thoughts.