An About Page and Help

A little more about site

I’ve started working a bit on the “About” page for the site. I wanted a place to highlight the mission statement I’m sort of working from:

To provide tutorials, workflows and a showcase for high-quality photography using Free/Open Source Software.

As well as a place to let users know who is behind the scenes working on the site. It’s mostly me at the moment, but I’ve managed to talk someone into helping me…

Enter Rolf Steinort

Yep, that’s right. I’ve managed to talk Rolf Steinort of Meet the GIMP fame into helping me out with the site. We’re still not 100% sure exactly what this means yet, but I have already been bouncing ideas off him for some of the site details anyway.

Meet the GIMP is over 7 years old now, and quickly closing in on episode 200! I am excited (and honored) to have his expertise and help as we build this site out. Especially because my feeble attempts at video productions are sad at best, and Rolf has the type of voice that could read the phone book and I’d still listen to it.

Content Status

I’m currently in the process of choosing which articles from my archive on Getting Around in GIMP I want to translate over and possibly update/rewrite. If anyone has suggestions on which ones they’d like to see, you can always let me know.

I’m currently thinking possibly the big B&W Conversion, the 2.5D Parallax, and/or the Film Emulation in GIMP/G’MIC.

Breaking Up Long Pages

One other thing that I’m trying to decide on is if I should worry about breaking up long posts into multiple pages or not. I don’t really have any interest in making users click through multiple pages to get all of the content (I personally hate doing this).

On the other hand, if the post is really long it could take some time to load all the assets if they all exist on a single page. It may be a delicate trade-off for keeping a page responsive vs. requiring a user to click through to a second (or possibly third) page. For the moment I’m erring on the side of convenience for the user and keeping things as long pages.

The Big Picture

This is all about visual media after all...

Sometimes I get into weird OCD mode where I need to have something for better or worse. One of those things was a desire to break out of the mold of standard blog-type posts in articles for this site. I’ve sometimes found images are relegated to second-class citizens on some page layouts that don’t do them justice.

I couldn’t let that happen here. The problem was that I needed to do some things to make sure the typographic layouts were visually strong as well. This meant a adding control to width and layout of main text elements, with the downside of having to hack a bit to make images large. The solution I ended up with was to add a tag surrounding elements that I wanted to break out of the current layout. So I would end up with something like this:

<!-- FULL-WIDTH -->
<img src="http://to be full width.png"/>
<!-- /FULL-WIDTH -->

Technically, in my case, I’m using the <figure> tag with <figcaption>, so my actual markup for full-width images looks like this:

<!-- FULL-WIDTH -->
<figure>
<img src="http://full-width-image-src.jpg" />
<figcaption>A caption for my image</figcaption>
</figure>
<!-- /FULL-WIDTH -->

This let me capture that block in my processing when I build the site (metalsmith), and to modify the page code to accommodate what’s needed to make it full-width. The result of this is that I can now break images out of their containers to span the full width of a page, like this:

Of course, this can get very tiring very quickly. I find that it tends to break the flow of reading, so should be used sparingly and wisely in the context of the post or article. I promise not to abuse it.

Attribution

It’s a small thing, but I’ve added an attribution line for the lede images that you’ll find in the bottom right of the actual image. I will also be incorporating the Creative Commons icon fonts to support proper attribution notice as well. Once I’ve done that, I will include a similar style attribution for other images (as it stands now, they can be put into the <figure> image caption).

Video Killed the Radio Star

Of course, sometimes what is needed to really explain a concept is to use a video. So I couldn’t just ignore a way to get good video styling.

My first hurdle was to find a way to keep the video container fluid with the rest of the page. Remember, the page is built to be responsive, so it’s a single page served to all devices. This means that I need to adapt to all possible viewing device screen resolutions (as well as possible).

Getting images to scale and resize correctly to fit new sizes was easy. Doing the same thing for video is not as easy, but wasn’t too bad. Once again, I’m relying on the kindness of strangers…

The Code

The answer came in the form of an A List Apart article from 2009 by Thierry Koblentz. The basic premise was to create a box to contain the video embed, then to stretch the video to fill the box dimensions. Then I could still the box to be responsive just like the other elements.

So I wrapped the video embed in a container box, and added some CSS classes:

<div class="fluid-video">
  <iframe src="http://Normal Youtube Embed Code"/>
</div>

Then it was just a matter of styling by setting the padding property to be percentage based on th width of the container. To use a 16:9 ratio, the percentage should be 56.25%:

.fluid-video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

With the container styled, it was a simple matter to fill the container with the embedded video:

.fluid-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Et voila! Fluid video embeds that hopefully should maintain responsiveness.

Of course, I couldn’t leave well enough alone, and to coincide with the previous idea of displaying larger images, I have also added a little extra to embiggen video embeds as well (not full width stretching, but to give it a bit more prominence).

Technically I’m stretching the video to 150% of the width of it’s parent container, which happens to be the same container as the <p> elements (so roughly 150% of the text column width). Mostly I was going to use this type of styling for highlight videos, and leave a normal video embed if it’s not the focus of the article.

Just for reference, a normal (fluid) embed would look like this relative to the surrounding text:

Which makes more sense for supporting material vs. feature videos.

Wrap it up Already

Ok, I could ramble on for longer, but I think my time is better spent getting back to writing the site. I think the blog back-end and formatting is mostly done at this point, so on to feature articles!

RSS Feed & Social Media

Finally getting the RSS feed working

It took a bit of digging and wrestling to get there, but a couple of nights ago I also managed to get an RSS feed working for the blog posts on the site. Honestly, I spent more time fiddling with dates in javascript than I should have.

I had to make some minor modifications this morning to accommodate where the location should be, but it should be live now.

The location is: http://pixls.us/blog/feed.xml.

Both the blog index pages and post pages contain a <link> element that point to it, so most readers should find the feed if you point it at a page. I’ll test it later, but the most important thing is the location is correct regardless of whatever hacking I do to the feed itself later.

I’ve tested the feed quickly with feedly and it appears to be working ok. If anyone else is using other feed readers and sees a problem, please let me know!

I intend to have a separate feed available for the articles and main site content when I get those ready to go (most likely at http://pixls.us/articles/feed.xml).

Social Media

I’ve also started (perhaps prematurely?) getting some social media accounts registered. If for nothing else than to keep someone else from parking the accounts.

Google+

At the moment, I’ve got a Google+ page setup for the site. I’ll try to keep updates flowing to that page as well (so if you happen to use g+, follow it!). If you already follow me on g+ then you’ll know I’m fairly active there.

Now if I could just get google to allow my vanity URL to only read +pixlus I’d be a happy camper!

Twitter

Back when I first registered this domain name, I apparently had the foresight to register a Twitter handle as well. So if you want to follow the conversation there, you can find me @pixlsus. I even found a first tweet back from Dec 2011!

Flickr

I’ve also created a Flickr group for users on Flickr to share photos or congregate. You can find the group here.

Really this is just a pre-emptive action to have these channels available as soon as we get going.

Moving Along

I feel like I’m gaining a little traction here. There’s a few more things I need to tidy up and make some design decisions on, but at least I have a clear vision going forward. I’ve already got an article ported over from Getting Around in GIMP on my blog to use as a test case for formatting.

As soon as I like how it’s looking, I’ll work on porting over some other articles as well. If it goes well, I may just go ahead and update/re-write some more things as well to test with. As soon as I have things in a relatively stable state I’ll also get some new material out as well!

A Push Menu

A Fanc(y|ier) Menu

So, I’ve had the idea in my head for a while that it would be nice to get the navigation out of the way. When I’m reading an article or tutorial, I don’t want to be inundated with elements that aren’t pertinent to what I’m reading. I want to focus on the content.

I had to think a bit on the best way to possibly achieve this. One option was to remove all navigation from the top of the page, and instead show them at the end of the article. This runs on the assumption that the user wants to read the page, and when they’re finished reading to possibly navigate somewhere else.

If they came to the page by mistake, or want to get out, they can always use “Back” on their browser. If they made it to the end of the article, then that’s the point where they may want other navigation options. (This is how the page is currently laid out).

If they don’t have javascript turned on, they can still use the site just fine. (This is important for accessibility, and security for some folks).

What About a Little More?

This is 2014 for the love of Pete! Surely we can reasonably expect that most users will have javascript? Well, maybe not. If they do, however, we might be able to create something slightly nicer.

I personally like the idea of a menu hidden out of the way until needed. So I put a small floating logo in the top-left of the page. If you scroll down, the logo should slide out of view (not needed). If you scroll up, it should bring the logo back into view (possibly needed).

This has already been here since I started building these pages, but now I’ve added a little more…

Push Menu

By default a click on the floating navigation logo will scroll the page to the navigation links on the bottom of the page. If JS is turned off, the floating logo will always be visible, and when clicked will still get you to the navigation links quickly.

If JS is turned on, though, the floating logo will now “push” the page to the side as it reveals a navigation menu on the left edge of the page. The first set of links mirror those at the end of the page for site navigation. The next set of links is a representation of the “Table of Contents” for the current page.

This is anticipation of longer articles being posted soon. I wanted to have an easier means of navigating long posts.

Try it out!

Clicking anywhere on the main page again will collapse the menu.

Pure CSS Solution

There may actually be a pure CSS solution for hiding/showing the menu. The javascript is really only there to manage class states, all of the styling and transition effects are done in CSS.

Honestly, though, I think I’m mostly done for the moment. I may come back and re-visit the pure CSS solution later, but for now I want to shift focus to working on content pages (and the actual content itself!).

Start Simple

My thought process so far on building the site is to minimize any requirements on stuff that’s questionable. I’m only assuming HTML/CSS for the most part. This is to make sure everything can still be accessible to folks.

It’s a royal PITA, though.

A Table of Contents!

So the addition of basic navigational elements was a no brainer, but that menu bar looked awfully sparse. So, I used the extra space to include a “Table of Contents” for the current post/article as well. This is generated automatically from all of the HTML heading tags in the page (h1/2/3/4/5).

My intention at the moment is to also have some sort of a reading progress indicator show up along the TOC. I think this could provide nice visual feedback to users on where they are in an article, and how far along they might be.

Again, this is something that should degrade just fine in older browsers/no-js. Those users simply won’t see the effect.

Building PIXLS.US

A journey of enlightenment...

This is just a log of reference material for actually building this site. It’s mostly for my own reference and edification. If you’re reading this, good luck making sense of my notes…

Static Website with Node.js and Metalsmith

I decided to build this site as a static website. This means that I’m generating all of the material on my local machines, and then compiling them into static webpages that are then uploaded to the server for serving. While this does sound like a pain in the ass, there are static site generators that make this job much easier.

So I looked around a bit more and found that apparently static site generators are the hip new thing.

I originally started with http://nanoc.ws/. While this was pretty interesting looking, I am just not a Ruby guy. So I had the double-whammy of learning the static build system along with Ruby occasionally. Plus, after a host of problems getting the correct ruby and gems installed on my OSX machine I just decided it wasn’t worth the hassle. (I have to switch between win at work, and OSX/Linux at home - so I needed a consistent environment).

I expanded my search and finally remembered Node.js. Looking around a bit more and I also found a static site generator for Node.js called Metalsmith. This was good, as I was already reasonably familiar with javascript.

Metalsmith basically just takes a directory of files, and passes them into a javascript environment for processing and output to a new directory, ready to be uploaded to a server. This is how this page is being generated right now as well.

Installing the Build Tools

The first thing to do is to get Node.js for your platform. Once installed, you’ll have access to the commands node as well as npm (node package manager?). Installing Metalsmith from there is as simple as:

node install metalsmith

Basically, Metalsmith just passes each of the directory contents through a stack of functions that you can use to process the files. Many of these are available as plug-ins for Metalsmith. For this site so far, I’ve been using these plug-ins:

• metalsmith-collections npm install metalsmith-collections
• metalsmith-permalinks npm install metalsmith-permalinks
• metalsmith-templates metalsmith-templates
• metalsmith-markdown metalsmith-markdown

For the templating option, I’m also using Handlebars.

There is a great tutorial on getting started with Metalsmith at Robin Thrift’s website.

Project Structure

The structure of this site is still in flux. By default metalsmith will look for a folder in the project root called “src”, and will output to a folder called “build”. The site structure I have setup for this site is:

|-pixlsus/
    |-src/
        |-articles/
        |-images/
        |-js/
        |-pages/
        |-scripts/
        |_styles/
    |-templates/
    |-index.js
    |_package.json

index.js

The main processing file for building the site is index.js.

var Metalsmith    = require('metalsmith'),
    collections    = require('metalsmith-collections'),
    permalinks    = require('metalsmith-permalinks'),
    templates    = require('metalsmith-templates'),
    markdown    = require('metalsmith-markdown'),
    metadata    = require('./config.json'),
    Handlebars    = require('handlebars');

Metalsmith(__dirname)
    .use(markdown({
        smartypants: true,
        gfm: true,
        tables: true
    }))
    .use(hyphenate_urls)
    .use(collections())
    .use(permalinks({
        pattern: ':collection/:title'
    }))
    .use(templates('handlebars'))
    .destination('./build')
    .build();

There are a couple of other things I am doing for the templating, and one custom function I wrote to automatically hyphenate url’s. To avoid something like:

articles/a%20new%20article/

I think this looks nicer:

articles/a-new-article/

Honestly, if I was just testing things out, the bare minimum I could use to get by would be:

var Metalsmith    = require('metalsmith'),
    templates     = require('metalsmith-templates'),
    Handlebars    = require('handlebars');

Metalsmith(__dirname)
    .use(templates('handlebars'))
    .destination('./build')
    .build();

If you have a base skeleton of a site, this would be all you need to run.

Building the Site

The site can be built by entering the site directory, and issuing the command node index.js.

Wait a few moments, and you should find a build/ directory full of your files ready to go.

Uploading

My host doesn’t have rsync access directly, but I can use rsync over ssh:

rsync -PSauve ssh --exclude=EXCLUDE_FILES build/ USER@pixls.us:/home4/pixlsus/public_html/

Which works just fine.

TODO

List of stuff I still need to get to:

• Test porting one of the ‘Getting Around in GIMP’ articles
  • Working on it.
• Port a few other test articles
• Use collections in Metalsmith to collect articles of a type
  • Generate a page of those.
• Probably a new index.html/front page.
• Work on “About” page
• Finish styling article pages.
  • Particularly the links (Mobile is done? - Tablet is needed).

This list will grow, of course, as it needs to until we launch!

Blog

I’ve started an article to represent blog posts on the site. I intend for them to live at the path: pixls.us/blog/YYYY/MM/title-of-post

The problem is that I can’t easily use metalsmith-permalinks for them. There doesn’t appear to be a way to easily process a sub-folder of documents with a different path. I don’t want the articles content to contain YYYY/MM in the path, but I do for blog posts.

So I think I’ll just have to write a plugin to handle that myself real quick. Shouldn’t be too hard, just need to do something similar to what I already wrote for hyphenating urls.

Basically, grab all blog posts, update their paths to the hyphenated version and change the source file to index.html in the directory. IF the file is not already in a sub-directory.

On Building PIXLS.US

Some notes from the back end

For the curious, and to serve as an introduction, I thought I’d make a few notes about how this site is built and what I’m currently obsessing over. Hopefully this can help define what I’m up to in case anyone wants to jump in and help out.

The Purpose

The entire point of this site, its “mission statement” if you will, is:

To provide tutorials, workflows and a showcase for high-quality photography using Free/Open Source Software.

Subject to revisions, of course, but mostly sums up what I’d like to accomplish here. I also think it’s good to have this documented somewhere to remind me. :)

The Technical

I had already started writing about this elsewhere, but I’m going to reiterate it here for posterity (when I wrote it earlier I hadn’t completed the blog portion of the site yet).

Static Pages

On the recommendation of darix on the #darktable irc channel, I looked into static site generators. I was originally going to use some sort of CMS and build things out from there, but I have to thank darix for causing me to pause and to think carefully about how to proceed.

I realized that I wanted to keep things simple. The main focus of the site is the articles themselves (a tutorial, workflow, or showcase). Really, this content is static by nature - so it made sense to approach it in that light.

The idea is to have all of the site content exist locally on my machine, then to pass it through some sort of processor to output all of the website pages ready to upload to my server. I was already familiar with the process as the GIMP website is built in a similar fashion.

I just had to find a static site generator that I could use and extend as needed.

Enter Metalsmith

There is a plethora of static site generators out there (apparently it’s the hip new thing?), so I just had to find one that I was comfortable with using and extending. I needed it to do what I wanted and get the hell out of the way so I could focus on content.

Oh, and I had to be able to extend it as needed myself. I’m already pretty comfortable writing for the web, so I decided to go with the Node.js-based Metalsmith. Mostly because I’m already comfortable making a mess in javascript.

Metalsmith basically takes a directory full of data, and passes those objects through any series of functions I want, munges them somehow, and then spits out my website. It’s the munging part that’s fun, and at least I can extend/modify things as needed quickly and easily.

tl;dr: I use javascript to process the files and output the website ready to upload.

Responsiveness

I also wanted the site to work well across different screen sizes and devices. So I’m trying to incorporate some responsiveness in the design. You can actually see it working right now by resizing your browser width. The page should reflow and elements change size to adapt to the new viewport.

This lets me focus on the content while knowing that it should adapt as needed to the viewer. As a great starting point, I used Adam Kaplans Grid.

Easy Reading

Taking a cue from the past, I’m also trying to maintain legibility and readability in the pages. This means paying attention to simple things like characters per line, font choices, and spacing. I’m not a designer, so this topic has been fun to learn about as I go.

The lines on this post, for instance, should settle in around 60-75 characters per line (I’m aiming for about 65). The Baymard Institute has a nice summary of the idea behind this.

Attractive

This goes without saying, I think, but who wants to look at an ugly layout/site? I can’t say this site is beautiful, but at least I’m conciously trying to make it a pleasant experience…

If not for everyone, at least for me…

Ease of Use

All the pretty in the world won’t fix something that’s hard to use. So I’m trying to put thought into user interaction. I try to get cruft out of the way so the focus is on the articles, while also providing easy navigation or interaction (that should get the hell out of the way when it’s not needed).

In Summary

That’s the short version. There’s a million things going on right now in my head as I build the site out. I’ve got most of the pieces sorted out, and just need to finish assembling them in a way that I like.

So we should be ready to get things kicked off before too long!

Hello World!

Let's see if I can get this thing off the ground...

Well, technically this isn’t the first post on the site. I had actually started with building out the temporary Coming Soon page. Then I shifted focus on styling the main content page for the site (articles). After a bit I realized that I should probably be working on some sort of blog posts as a means for folks to keep up with what I’m doing.

So, here we are!

Who Am I?

I’m Pat David.

I’m an occasional photographer and I dabble in digital artwork occasionally as the mood strikes me. I also happen to be a fan of free software. Those two worlds collide fairly often, and lately I’ve been having a great time writing about them.

I’ve been writing tutorials on my blog as well as trying to modernize/update tutorials on the GIMP website. You could call me a (small) part of the GIMP team (but I’m trying to do more!). I also try to help out where I can on other F/OSS projects as well (G’MIC is another place you’ll find me bumming around). I do these things because I think it’s important to try and give back to the community in whatever way you’re capable of.

I’m loud. So I figured I could use that capability to help out.

(It’s my demented super-power).

So What’s Going on Here?

Well, I mentioned on the main page that I felt like we could use a site/community dedicated to photography. Particularly Free/Open Source Software and photography.

The problem I noticed is a lack of sites that focus explicitly on photography and workflows using F/OSS tools. There are plenty of blog posts on various sites, forum posts on various boards, and the occasional group on social media. There is not a great website to act as a portal specifically for photographic needs or interests.

It’s my sincere desire that I can build it.

I actually find it strange to write that. How does this not exist already?!

Is It Ready Yet?

No. Not quite.

I’m building this entire site from scratch, so it’s taking a little bit of time. I only just got the blog portion finished, so hopefully that much is done.

I’ve also mostly finished what the main articles will look like. I’m in the process of porting over some of my tutorials from my blog to here so that I can have some content to test things out with. I enjoy doing this sort of thing, so it’s a nice way to relax for me.

After that I’ll just need to get a couple of other pages setup, and I should at least have the skeleton of the site up and running. I promise, as soon as I have something to actually launch I will be loud and annoying about it.

Can I Help?

That’s the spirit!

Yes, absolutely. Just shoot me an email and I’ll be happy to answer any questions I can. If there’s some particular skill you’d like to bring, I’m all ears. If you want to write an article or tutorial, let me know.

Sorry, you need Javascript on to email me.