Englebarting Convergence

I consider myself so fortunate to have had a few Doug Engelbart convergences in my career. That featured image at the top was made by me after he was a guest at a 2006 NMC Board Meeting. I took my own photograph of him at the meeting and superimposed it from a screenshot of the 1968 “Mother of All Demos”

At the time, the NMC organization was considered by him as engaged in “Type C” activity one that “focuses specifically on the matter of accelerating the rate of improvement.”

That was 2006, this is now. But that’s another story.

I did get to attend with NMC the 2008 40th anniversary of “the demo” and be part of the ? 2009 NMC Summer Conference when Doug was awarded a medal by the organization.

Already written are some Engelbart-ian things I’ve gotten to be involved with- a new project with Gardner Campbell focused on a 2019 event around web annotation of the 1962 Augmenting Human Intellect paper as well as neing asked by Christina Engelbart to help with the WordPress.com hosted page for the 50th anniverary of the Demo (happening Sunday).

Web site for thedemoat50.org

Beyond doing some theme juggling and custom CSS to fine tune the site, I was asked as well to put together a page to feature images of the speakers and links to bio page.

Speakers page for the Dec 9, 2019 Symposium for the 50th anniversary of the Mother of All Demos, the color image is the effect on rollover of an image.

Get ready now for some techy inside baseball on this part of the work, feel free to scroll on by…

I wanted a layout that would flex responsively, and while it may have worked with a bunch of left aligned images/captions, I turned to some CSS in an old Bootstrap theme, and pulled out just enough for this kind of structure for an entry. It is kind of neat how you can insert a bit of Bootstrap into a non Bootstrap theme. Duct tape, baby!

The entire thing is kept inside a div

<div id="speakers" class="row-fluid">
...
</div>

and an individual person/image/link looks like

<pre>
<div class="span2 center">
  <figure>
    <a href="https://thedemoat50.org/symposium/speakers/person-name/">
    <img class="speakerpic" 
      src="https://thedemoat50.files.wordpress.com/2018/11/person-name-150.jpg" 
      alt="Person Name photo" />
    </a>
  </figure>
  <h3>
  <a href="https://thedemoat50.org/symposium/speakers/person-name/">Don Andrews</a>
   </h3>
   <p>Title/Organization</p>
</div>

...

</div>

and an individual person/image/link looks like

<pre>

<img class="speakerpic"

src="https://thedemoat50.files.wordpress.com/2018/11/person-name-150.jpg"

alt="Person Name photo" />

</a>

</figure>

<h3>

<a href="https://thedemoat50.org/symposium/speakers/person-name/">Don Andrews</a>

</h3>

<p>Title/Organization</p>

</div>

So the image and the title is linked to a separate bio page. The custom CSS added to make this work looks like:

.row-fluid {
	width: 100%;
}

.row-fluid:after {
	clear: both;
}

.row-fluid [class*="span"] {
	display: block;
	width: 100%;
	min-height: 300px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	float: left;
	margin: 0 2.5%;
}

.row-fluid .span2 {
	width: 20%;
}

.center {
	text-align: center;
}

.entry-content #speakers a {
	border: none;
}

.row-fluid {

width: 100%;

}

.row-fluid:after {

clear: both;

}

.row-fluid [class*="span"] {

display: block;

width: 100%;

min-height: 300px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

float: left;

margin: 0 2.5%;

}

.row-fluid .span2 {

width: 20%;

}

.center {

text-align: center;

}

.entry-content #speakers a {

border: none;

}

I fudged the typical width used in Bootstrap to make it fit with a max of 4 per row.

Then I got fancy with the images, by using some CSS filters and transitions to color each image grey, and make them zoom and turn color on a hover.

.speakerpic {
	border-radius: 50%;
	background-color: #DDD;
	border: 5px solid #cfd8dc;
	width: 98px;
	height: 98px;
}

figure img.speakerpic {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

figure:hover img.speakerpic {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}

.speakerpic {

border-radius: 50%;

background-color: #DDD;

border: 5px solid #cfd8dc;

width: 98px;

height: 98px;

}

figure img.speakerpic {

-webkit-filter: grayscale(100%);

filter: grayscale(100%);

-webkit-transition: .3s ease-in-out;

transition: .3s ease-in-out;

-webkit-transform: scale(1);

transform: scale(1);

-webkit-transition: .3s ease-in-out;

transition: .3s ease-in-out;

}

figure:hover img.speakerpic {

-webkit-filter: grayscale(0);

filter: grayscale(0);

-webkit-transform: scale(1.3);

transform: scale(1.3);

}

And last, I added a media element to change the layout for smaller width screens to have one speaker per row, and change the image size to be a bit smaller

@media (max-width: 600px) {
	.row-fluid {
		width: 100%;
	}
	
	.row-fluid [class*="span"] {
		float: none;
		display: block;
		margin-left: 0;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	.speakerpic {
		width: 128px;
		height: 128px;
	}
}

@media (max-width: 600px) {

.row-fluid {

width: 100%;

}

.row-fluid [class*="span"] {

float: none;

display: block;

margin-left: 0;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.speakerpic {

width: 128px;

height: 128px;

}

I think it’s kind of slick.

As usual when asking you get all kinds of crazy images when asking for speaker photos, some are professional headshots in high resolution, others were little tiny web images, and others I just had to fish around online to try to find.

For the individual pages, I modeled them all after the first one that I was provided, the page for Gardner Campbell.

Sample bio page (the bio tex is below)

The image sizes varied depending on what I was provided. Speakers were asked to optionally provide links to twitter and/or linkedIn; I added these as icons as well as a third web icon of they provided (or I found) a blog, professional page, etc. Some I had to do some digging to find.

And then a lot of bios I got lacked links- how can you have an event honoring Doug Engelbart and hot offer hyperlinks? So I always scrounged for relevant links.

This hardly matters in the long run, but I like these small details.

The last bit of Engelbart Web work was a makeover for a project I first built for Christina in 2013, a tribute site that also was hosted on WordPress.com. We wanted something where people could email us their memories and we could turn them into posts. I developed an approach that uses an email alias address that sends them to a special gmail account where we moderate them, then forward the ones we want published to the WordPress site using the Post by Email capability.

The need for this was to be able to moderate content; the only way in WordPress to do this is make the account that post a contributor role (but then you lose media and formatting).

Anhow, I cringed in 2018 when I saw the site I made, it was not responsive and looked ugly on mobile:

the original Tribute to Doug site, in boxy old school blog like pattern.

Here is the modernized view of the same site now at http://tribute2doug.org

The theme is called Afterlight I chose because Christina really liked the photo of her Dad at Three Sisters mountain in Oregon, gazing off into the future:

photo of Doug Engelbart provided by Christina Engelbart

There was minor adjustment after the theme change, it just took some time to figure out the workflow (and the access) with the special gmail account we are using. You can certainly help us out by writing your own personal tribute, memory of Doug Engelbart- see the details on how to send your own by email to us.

We’d hoped to get this more publicized before the Mother of All Demos Seminar this weekend, where certainly gathered will be many Friends and Admirers of this great man.

All of this is a huge honor to be playing this small web role in supporting a legacy.

Featured Image: