Synthesis : Scott Becker

End of July

Today and tomorrow we’re going camping at Jedediah Smith Redwoods State Park. Since I may be out of network range I’m posting this early. This will be the last post of the July blog-every-day challenge. In August I’m going to back off and try posting 2-3 times a week. Hopefully a bit more developed and longer form. Writing every day has been tough at times, and not always up to my own standards, but was certainly good for me to get into a regular habit.

I also managed to run 13 times so far this month, for a total of 33.56 miles. Definitely a record! I’m going to try to get atleast one more in today or tomorrow.

Comments Off on End of July

Standardizing Dev Workflow

Why does every company have their own ad-hoc, rolled together development workflow? I’m talking about the infrastructure around source control, testing, continuous integration if it exists, and the process of releasing to production. Every company has their own approach. Often it’s something that is added in later, after pain has been felt and lessons have been learned. The only companies who seem to have this standardized are consulting companies who work on many projects for many clients, and this is because they get to continually start over and refine their process with each new project.

Isn’t this something that should be productized? Lots of companies have built products around the individual pieces of the puzzle: Github, Atlassian, Pivotal Tracker. That’s not a bad thing, having the ability to swap out various components of the system as needed.

You can’t dictate a full end to end process for a company or a team. Thats part of what (currently) makes a company unique. But you could at least have a template (or multiple?) – maybe its open source or maybe its a product, but instead of rolling your own when you started a new company or project, you run a command (a la “rails new blah”) and you get a running app, checked into git, running in continuous integration, deployed online, wired up to project communication tools etc. 

Comments Off on Standardizing Dev Workflow

August

One of my goals for the remainder of 2012 is to get a few modest “products” out the door. In August, my personal challenge is to build and launch a video screencast tutorial site that I’ve had sitting on the back burner for years now. The goal is to get the site and the first few videos up and available by the end of the month. 

Comments Off on August

The Country

When I was younger living in suburban Florida, I dreamed of moving to a big city, where there’s always something to do, 24 hours a day. 

About five years ago I came to Portland, and decided to move there. It had both a bigger, urban vibe to it, while retaining a small town feel. Another cool thing is it’s proximity to beautiful country. Portland isn’t that big and it’s the biggest city in the state. Most of the rest of the state  is country.

Every time I go to the country I feel refreshed. The wide open space, the quiet, and the nature.  I can see myself living in the country, for atleast part of the year. Some of my favorite memories of childhood were the two weeks I spent on a lake in the woods of central Maine every summer.

I think it’s all part of the progression towards simplifying life. Less is more!

1 Comment

Converting HTML to WordPress Themes

I continued to work on the minimal theme a bit last night after the post. I decided to experiment with web fonts, and found a serif font that is quite a bit nicer to my eyes than Times New Roman – Merriweather by Eben Sorkin. So the template now looks like this. I’ve got it to the point now where I’m happy with the way it looks. It looks good on mobile devices too.

Next up is converting this sucker to WordPress. I helped my girlfriend do the same thing a few months ago, but it’s been a while so I needed to dig up the resources again. I remember we used this tutorial last time, so I’m just using it again.

First thing to do was setup PHP on my local machine. I build most projects with Ruby or JavaScript, so I never really need to touch PHP. It comes with the version of Apache already installed on the Mac, but it wasn’t working quite right, and I have no time to mess around. I’m not here to fight with PHP all day, I have a theme to create. So I downloaded MAMP, followed the instructions for installing WordPress and I was up and running right away.

Next I exported all the content from my existing site. On the local version, I installed and ran the importer plugin, and bam, all of my content was loaded. WordPress is great in that so much of this infrastructure is already built. So far, this is easy.

Now it’s on to creating the theme “structure”. First step is about the structure of the main HTML file itself. Not much to do there. I already have an HTML file the way I want it. Moving to the next step, theme template and directory structure. I’m starting as minimal as possible, and the static template is already built, so I just have one HTML file, some CSS, and Twitter Bootstrap assets. I just copied index.html to index.php, and moved on from there tweaking it.

It’s nearly good enough to go live, but it still needs some tweaks. In the meantime, thanks to being hacked, I may just move to a static site generator. EDIT: It’s live!

Comments Off on Converting HTML to WordPress Themes

Minimalist Blog Template Update

Spent more time on the new blog template tonight. I’m basically going for the look of the Instapaper iPad app, but without all that Instapaper. Newest version is here.

The great thing about minimalism is it’s pretty easy to do. Just keep it simple. I added margins between paragraphs, headers and line height so the text can breathe a little. Converted the text to serif fonts, which is a departure for me. I’ll try it for a while.

The next step is converting it from static HTML to a WordPress template. I’m looking forward to getting this live.

3 Comments

Giving Tech Talks

So I’ve attended a few local tech meetups over the last couple weeks, and watched a handful of talks. Some of them are brilliant. Much respect to anyone who takes the time to prepare, practice, and get up in front of a group to talk about anything.

If you’ve never given a talk, and you’re watching one, you might not be cognizant of the speaker’s presentation style. At least beyond whether you’re paying attention, being entertained and enjoying it. You also become acutely aware if you’re bored and your brain has checked out and moved onto other things.

I’ve given a handful of tech talks. Once you’ve done this, and practiced your talk, you become much more aware of style, pacing, and flow, when watching others. I’m not as good as I’d like to be, but I’m at least aware of the gap between my taste and my work. Just like writing or music or anything else, the only way to get better at it is to do a LOT of it. Ten thousand hours. Go ahead, I’ll wait. In the meantime, I’ve taken some notes to myself on how to improve. This mostly applies to tech talks.

Do:

Use color on slides. Generic black and white slides are generic. Built in themes are boring. Don’t use them.

Use big text. I can’t read your tiny text and I don’t want to squint. Make it bigger.

Use less text. Make one point per slide. No extraneous stuff. Just the point.

Use non typical examples. In the web development world, typical examples are blogs and todo lists. Don’t use those. My brain and those around me will check out and think about beer and bikes instead. Use beer lists, bike map trackers, something, anything but blogs and todo lists.

Use the firehose. Be fast paced. Use complex terminology and reference deep math concepts. Or some other field of endeavor that we don’t already know about. Assume your audience is smart and keep up. We probably sped read your slides before you started speaking. Get to the point and be quick about it.

Don’t:

Explain individual lines in a vast sea of monochromatic code. Don’t throw up a full screen of black and white code and walk through what each line does. Show me a slide with only that line of code. In huge text. Syntax highlight the part you’re talking about.

Explain the history of the Internet. Unless that’s the main subject of your talk. Again, know your audience. And by now, everyone knows the history of the internet. Never speak of it again!

Explain the history and progression of Web apps. Same as above. Then AJAX came along. Yep. Move along.

Conclusion

Again, this is a note to me, not a knock on anyone else, as I’ve been guilty of these myself, and I’ve seen others make the same mistakes, and it’s hard to watch. But it’s also very easy to arm chair quarterback, so I’ll shut up. Speaking is hard!

2 Comments

Minimalist blog template progression

Ok, I put in a little more work into the new blog template tonight. If you’re just joining, in the last entry I declared my intention to create a new, basic minimalist blog template for this site and live blog it.

So, first I created an empty git repository and added a nearly blank readme file to it and threw it on Github.

Next is the question of how much HTML5-specific tags to use in the markup. I looked at the source of a few of the minimalist templates out there. The source on Mike Bostock’s blog is very HTML5. There is no head or body tags. Just the doctype, followed by a title tag, style and script tags, then right into content with HTML5 tags – header, aside, footer. Alex Payne’s blog has the more traditional head and body tags, various links and meta tags, etc. It doesn’t really seem to matter. Everyone got along fine before HTML5 tags. I guess they have more semantic meaning than plain divs with semantic classes. I found this handy HTML5 Element Flowchart, just in case you need help making these intense tag name decisions.

Then I went back to the Twitter Bootstrap framework, because I like it’s built in responsive design. I started with the appropriately named “starter template“, which still isn’t 100% minimal – it includes the ubiquitous top navigation bar that every lazy developer who uses Twitter Bootstrap fails to modify, so to start I just copied that file to index.html.

Next, since I’m building bootstrap from source (instructions), I compiled it with “make” and copied over the CSS and JS to an “assets” folder in my template project. Next was simply removing the top navigation bar, since I won’t be using that on the blog. Then to make it more blog like, I put in some long form generic lorem ipsum text and headers, and made it more HTML5-y by adding header, article and footer tags. It didn’t seem to make a difference to the look and feel, so why not.

-  
-
-    
+ +

Primary Header

+
+

By default, this template resizes as you scale the window up and down, which looks good as it gets smaller, but isn’t very readable for a single column when the screen gets wide. With the chrome inspector pointed at the container element, you can see that depending on the width, different style rules start applying:

  @media (min-width: 1200px)
  @media (max-width: 979px) and (min-width: 768px)
  @media (max-width: 767px)

This is all coming from boostrap-responsive.css. Compiling from source actually turned out to be useful right away, because the LESS templates generate a lot of code for each of those layouts. You could remove them from the generated css file, but it would be a lot more code. With the LESS templates, you can comment out the wide layout in one line, and modify another and have it stop expanding beyond 768px wide:

diff --git a/less/responsive-768px-979px.less b/less/responsive-768px-979px.less
index 76f4f6d..7fa6dd0 100644
--- a/less/responsive-768px-979px.less
+++ b/less/responsive-768px-979px.less

-@media (min-width: 768px) and (max-width: 979px) {
+@media (min-width: 768px) {

diff --git a/less/responsive.less b/less/responsive.less
index 734b198..e8476ea 100644
--- a/less/responsive.less
+++ b/less/responsive.less
@@ -38,7 +38,7 @@
 @import "responsive-768px-979px.less";

 // Large desktops
-@import "responsive-1200px-min.less";
+// @import "responsive-1200px-min.less";

So far it looks like this. Yes, mind blowing. It’s a good start though.

Comments Off on Minimalist blog template progression

Creating a minimalist blog template

I’ve been meaning to create a new template for this blog. That’s probably not relavant for those of you who read this in a feed reader, it’s more for myself, because I actually look at this thing. I also like reading blogs on their actual sites as opposed to feed readers. I can’t be the only one. The current template is a built-in WordPress theme, and while it’s nice enough, it’s become totally generic and boring to my eyes. It’s also not-invented-here, and we can’t have that, now can we? Well we can, somewhat. I could go full static-blog-generator, use Github pages, or create a brand new blog engine, but WordPress works fine. It has lots of plugins that do everything under the sun. This is just about look and feel.

Another good reason for creating a new template – it’s always good to practice the basics. Like the idea of kata in martial arts, if you continually practice patterns of movement, they become engrained in muscle memory and you’re able to perform them flawlessly without thinking. Or so the theory goes. Master the basics.

Creating the template involves two basic steps: creating the static HTML, and then converting it into a wordpress theme by breaking it into multiple PHP files, adding tags for outputting posts, comments, etc.  For the next few blog entries, perhaps I’ll just live-blog the process.

So, first thing to do is decide what it’s going to look like. In the words of Edward Tufte and as mentioned here previously, “above all else, show the data.” In other words, it should be minimal. It should be easy to read. It should get out of the way. Something along the lines of Alex Payne and Mike Bostock‘s blogs, or Gist.io. A clean, uncluttered, single column of text. 13-14pt font size. Lots of white space.

Next, is deciding what, if any pre-existing tools to use to build it. The Twitter Bootstrap framework is nice because you can put together something decent-looking in a relatively short period of time. I’m not looking to reinvent the CSS framework wheel, so I’ll go with that. Only downside is including a lot of CSS I won’t be using, but that can be trimmed down. One bonus is the built in responsive-design support, so things look readable on mobile, and you don’t end up with microscopic text and need to zoom, which is what I’ve got going on now.

There’s a few ways to use Bootstrap. In the past when, I’ve just downloaded the current zip file and copied the precompiled CSS into my projects. That works and gets you up and running with something in a couple minutes. It’s also possible to customize it online and download the result. Or for ultimate flexibility, you can clone the full git repository, then customize and compile the CSS at the source level. I’m going to go the third route this time, because I’m just curious. Maybe I won’t need it. We’ll see tomorrow…

Comments Off on Creating a minimalist blog template

Gun Control

Gun Control is back in the collective mind after this week’s tragedy. A friend’s facebook post stating 100 round drum magazines shouldn’t be legal for citizens turned into a heated discussion with good points from both sides. As for my own personal opinion on this matter, I’m in favor of more regulation of semi-automatic assault-rifle style weapons. I do not think all guns should be outlawed or that the average person’s right to own a hunting rifle or a handgun in order to defend themselves should be taken away. Just that these more-efficient, high-round, long-range weapons ought to be harder to get. Perhaps only by oh, well regulated militias. Aka, trained military personel.

Here’s a link to Jason Alexander’s rant on the topic, expressed more clearly and at length.

Comments Off on Gun Control