Gratuitous Gallery

Where We Start

Where We Want To Go

Code

<div class="tiled-gallery type-square" ...
    <div class="tiled-gallery-item">
        <a href="https://deepcoder.wordpress.com/?attachment_id=55" border="0">
            <img width="189" height="189" ...
        </a>
        <div class="tiled-gallery-caption" style="display: none;">Where We Start</div>
    ...
        <div class="tiled-gallery-caption" style="display: none;">Where We Want To Go</div>

The WordPress Chunk theme gallery code opens with CSS classes for a tiled-gallery of type-square layout. Then the item gets its own div and class tiled-gallery-item. The item is actually an image (img tag) wrapped in a link (a tag).

Nice, except my theme throws away my carefully worded captions as seen in the last lines with local (read low tech, poor style) style=”display: none;“.

Update

Happy after publishing the post as my captions show up in a hover event.  But there is a mystery which begs deeper code browsing.  While there are CSS hover sections, the low level HTML local style=”display: none;“ gets dynamically overwritten at the HTML level by some script.  Firebug shows me a goodly number of javascripts. And we know that WordPress uses PHP such that we may need FirePHP to go deep into this code.

Stay tuned as we learn about Firebug and FirePHP for HTML/CSS delving with the Inspect-Element button and progress to deeper looks at script code.

Advertisement

Installatron Announces WordPress 3.9

My GoDaddy Installatron announced an available update to WordPress version 3.9 on April 17, 2014.

While currently forced to use WordPress.com for Robin’s class my .org site is languishing, and apparently hurting my Google ranking by having two deepcoder sites.

While waiting for class to end… we can hold off on the WordPress.org upgrade and see if it becomes forced by WordPress.  Presumably WordPress.com automatically and transparently updates in a easy to take blue pill.

Deepcoder can’t wait to take the Red Pill and find truth in the rabit hole.

Webhooks

Browser to Web Server to Web Server

When we read pages our browser retrieves them from a web server through an HTML GET. These HTML GETs are our downloads – the bulk of bandwidth and data plans. When a blogger hits the Publish button (input tag) in a WordPress.com site the browser sends an HTML POST to the wordpress.com web server.

<input id="publish" class="button button-primary button-large"
 type="submit" accesskey="p" value="Publish" name="publish">

Then with a webhook tied to your_server.com, the wordpress.com web server can HTML POST details of your posting to your_server.com.  WordPress lets you choose which details to track, and can HTML POST in response to Post Publishing, Page Publishing, and Commenting.

Dashboard(your browser)
 → WordPress.com(Web Server)
   → your_server.com(Web Server)

Essentially a WordPress webhook allows you to collect extensive statistics and identity information on your own server. This means you need to have your own server account and some code in your favorite language to listen for HTML POSTs from WordPress.com to the webhooked URL. Such code can save, analyze and display information from any webhooked blog.

A deep coder extra credit opportunity

Robin could ask us to webhook all our blogs to a code on her server for centralized tracking of class publishing and commenting.  For comments a great deal of information can be gleaned, but it is not specified that the HTML POST will tell us to which blog a comment is posted.  But with a unique URL on Robin’s server for each student blog, we could track the web of commenting relations between students.

Coder’s Block

This whole idea of letting WordPress write my code in this Visual, What You See Is What You Get editor feels like coding with a paint brush. WordPress tries to support our artistry. Creative blocks in a coder relate to grabbing a can of Mountain Dew, and relate in an artist to reaching toward insatiable angst.

My chains are not your chains.

Restrain flickers till they shine as flames.

Withhold inadequate lines in the shadow of their future elegance.

When in doubt – read code.

---

<blockquote>

        <p style=”text-align:center;“>My chains are not your chains.</p>

        …

</blockquote>

---

Read a Code to Unlock Coder’s Block

The code inside the art of a poem can be offset with a blockquote tag.  Ahhh back to the comfortable productivity of code.  Each line is broken with a p tag leaving an uncontrolled line spacing.  Doth WordPress need lend us a Poem format?

Local style without the beauty of eternal Cascading Style Sheets (CSS) for a truly poetic style lets us text-align: center; for a modicum of expression.

No wonder I suffer from Coder’s Block.

video code

Code Impact from Dashboard Format Selection

By changing from Standard to Video format of the blog post we get the following three additions:

<body class="... single-format-video ...">

<div class="...format-video ...">

<span class="entry-format">
<a href="https://deepcoder.wordpress.com/type/video/"
   title="All Video posts">Video</a></span>

The first two additions are classes for extra CSS code.  My theme does not seem to take advantage of this code, but if we customize this theme we will have a place to hang our CSS which will hopefully be portable across theme upgrades, changes, or WordPress.org upgrades.

The third addition is a button titled “All Video posts” to presumably bring up a page with all the Video format blog posts.

Media Library Reduced Image: Does it Cost a Full Size Download?

Media Library Thumbnail Insert

Photoshop Class Photo

The above thumbnail is 132 by 150 pixels or a total of 19,800 pixels inserted from a full size photo in the media library.  The original is 648 by 732 pixels for 475,632 total pixels in a 68KiB JPEG file.  The full size image is 24 times larger than the thumbnail.

Thumbnail Insert Code:

---

 

<div id=”attachment_9” style=”width: 142px” class=”wp-caption aligncenter“>
<a href=”https://deepcoder.files.wordpress.com/2014/04/w_retouch_brianstafford_q60.jpg“>
<img class=”size-thumbnail wp-image-9”
src=”https://deepcoder.files.wordpress.com/2014/04/w_retouch_brianstafford_q60.jpg?w=132&h=150”
alt=”Brian in Photoshop Class”
width=”132”
height=”150” />
</a>
<p class=”wp-caption-text“><br />Photoshop Class Photo</p></div>

---

We see fixed sizing in the enclosing ‘div’ with id ‘attachment_9’ with a width of 142px.  The ‘img’ tag also has fixed sizing, width = “132” and height = “150”.  My first guess from the ‘img’ sizing is that a full sized download may be used, and the browser is given the work of resizing the download.

My second guesses involve the ‘img’ tag’s src =

“https://deepcoder.files.wordpress.com/2014/04/w_retouch_brianstafford_q60.jpg?w=132&h=150“.
The part after the .jpg file name translates to: ? w=132 & h=150. This could be telling the WordPress (MySQL) database to either actively reduce the original file size, or else the database has stored the reduced file size and this suffix (after the ? part) is accessing a hidden thumbnail (not shown in my Media Library).

The issues are:

• Risk of an over sized download with high data charges for phone users or hosts other than WordPress.com
• Streamlining the Media Library to hide variants of our originals.

Night Zero

GoDaddy Installatron

Stats for GoDaddy’s WordPress

• Version 8.1 installed for free (Gnu Public License)
• 21 MBytes
• A single blogging sub domain of DeepCoder
• Only 3 themes (wordpress.com free account has many more)
• auto magic MySQL database (Thank you Installatron)

After a light exploration of customizations for the install, theme, and settings I think we can spend significant time learning WordPress nomenclature and capabilities.

First Code Evaluation

Let us look at what goes into HTML <title> tag which gets placed on a browser tab for our first page.

<title>DeepCoder's WordPress Initial Experience | Explore In Code</title>

1. Page title is “DeepCoder’s WordPress Initial Experience”
2. Tag line is “Explore In Code”
3. Browser tab is “DeepCoder’s WordPress Initial Experience | Explore In Code”

A theme customization form fills in this title tag. The tag line is optional. The page header uses this same information. I don’t like tying the browser tab display to the page heading / sub-heading. Though we have not seen a favicon hook yet, so there may be hope
inside WordPress’s dashboard (hands distanced from code) — else we will have to go deeper in html or php code