Earth Via Radio

Talkin’ to Dries at Drupal Downunder 2012

Peter — Wed, 18 Jan 2012 02:19:34 +0000

The event organisers recorded Dries and I talking… I guess that’s a good idea for posterity and everything.

Design thinking for 2012

Peter — Tue, 10 Jan 2012 10:49:09 +0000

Disclaimer: There’s some new web design thinking that I’ve been catching up on in the holidays. I’ve collected some (extremely rough) notes (that do no justice to the primary sources) for future reference.

Boulton on a new canon

Mark Boulton talking about a new canon for web design. My notes from watching the talk.

Ideas and knowledge we need to fulfill our work cannot be contained inside our heads… we need to create tools to save that knowledge for us to use later… outing the mind. Slide rules etc
Responsive design… central heating, VW Golf (automatic lights, automatic windscreen wipers). Intelligent, smart and responsive design… ie the VW engineers have removed all things that drivers do not need to worry about so they can focus on driving (steering the car, being aware of the road, conditions and other drivers).
Responsive design systems require: sensors, control systems, actuators.
Egyptians designed there entire built environment around a cubit (forearm)… the units of measurement were defined by the human form…. resulting in a connectedness between the built environment and the humans involved.
http://en.wikipedia.org/wiki/Le_Corbusier - crazy ideas for Paris…. http://en.wikipedia.org/wiki/Le_Corbusier#The_Modulor, a new scale for a modern form.
“A new canon should create connectedness on a very fundamental level.”
“We’re good at books… we’ve been doing them for a long time.”
Medievel books, divine proportion.
four canons of page construction – we’ve become blissfully unaware of the rules that create the binding of text to the page.
web design needs to develop a new design canon
- work “content out” instead of “edges in”
- the new canon should bind the content to the device… a new set of binding principles.
  - there is no page, there are no edges
  - you must create a feeling of connectedness (bind the content to the display)… things should relate to other things… they should scale and remain connect
  - embrace reflow
  - content out not canvas in… try to find a constant that can scale to create the columns in the grid.
  - to create connectedness we need to abandon pixels… use ems… ems create a fundamental relationship between the typography and the device
  - binding the content to the device…. use responsive techniques
  - designers have to be comfortable losing control, they need to embrace reflow
  - web design 15 years old with 2000 years of (book design) baggage

Typography and modular scaling

Two articles I read give a detailed analysis of a new/old idea and propose similar approaches:

More Meaningful Typography by Tim Brown (A List Apart)
R(a|ela)tional Design by Billy Whited

At the risk of completely distorting their ideas the rough process they outline is something like

make an informed font decision (based on connectedness referred to above, if you will)
pick the first “important number” (your base font size perhaps)
pick a second “important number” from your scale (this could be a width of some media or ad etc)
choose a scale (preferably based on some type of connection to your design/goals/aim), the Billy Whited article even suggests playing the scale on a keyboard to experience the relationships via an alternative sense.
Plug your two important numbers into the scale (there’s a tool here: http://modularscale.com/)
Use the numbers on your scale to create harmony between the page elements (you’ll need to improvise and use your eye).

Many of the ideas about modular scaling and Mark Boulton’s new canon are covered in Composing the New Canon: Music, Harmony, Proportion by Owen Gregory.

Attention designers, please check your font in a web context first

Peter — Mon, 09 Jan 2012 03:15:50 +0000

Aren’t all these new web font tools fantastic? Unfortunately the IE engineers and the Firefox team didn’t borrow Adobe’s font rendering engine from Illustrator or Photoshop. Now you can see how that fancy web font is going to look in a real browser.

http://webfontspecimen.com/

https://github.com/jonikorpi/Frameless/blob/master/frameless.html

Peter — Sun, 08 Jan 2012 08:03:26 +0000

A clean starting point for modern HTML pages courtesy of http://framelessgrid.com/

https://github.com/jonikorpi/Frameless/blob/master/frameless.html

Old school DOM manipulation with Javascript

Peter — Sun, 08 Jan 2012 07:17:07 +0000

jQuery has made DOM scripting a cinch but sometimes it’s nice to revisit the classics. Playing around with creating new DOM nodes, and changing classes:

Simple DOM manipulation

Javascript DOM manipulation

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

one
two
three

yo
wassup

Installing Drush Make using Git

Peter — Fri, 09 Dec 2011 01:51:08 +0000

Here’s the follow up to the previous screencast Installing Drush using Git. This time we’re installing Drush Make.

Quick and dirty H.264 transcoding with FFMPEG

Peter — Fri, 09 Dec 2011 00:47:03 +0000

Disclaimer: the following relates to a vanilla FFMPEG install on a stock standard Ubuntu 11.10 machine.

Recently I’ve started making all my screencasts for work using recordMyDesktop on my Ubuntu machine (which is working well) and the output file is a Theora/Vorbis OGG video (+10 software freedom XP) but the trouble starts when I try uploading these videos to Vimeo. For some reason Vimeo doesn’t like the videos (they upload fine but encoding doesn’t happen). To get around this I’ve started transcoding the Theora OGG videos using FFMPEG which is a wickedly powerful CLI program available on just about every computer platform and also the foundation to many of the GUI video transcoding tools out in the world too.

FFMPEG is awesome but unfortunately my tiny primate brain gets sore when I try to figure out all the options for transcoding videos. My new strategy is to give the FFMPEG command the least number of options as unixly possible and let FFMPEG decide what’s best. It works out surprisingly well with FFMPEG choosing sensible defaults on my behalf.

Here’s my latest favourite command for transcoding videos into H.264/AAC MP4 files.

[~]$ ffmpeg -i my-ogg-theora-video.ogv -vcodec libx264 -vpre medium -acodec libvo_aacenc shinynew-h264-video.mp4

Apart from specifying the input file and the output file the only options i’m using are:

-vcodec libx264 … I want the video codec to be H.264 (libx264 is the open source H.264 library from the VideoLAN people)
-vpre medium … this is a preset for the libx264 library, if you don’t have a preset it throws an error.
-acodec aacenc … choosing aac as the audio codec.

The resulting files are slightly smaller than the Theora OGG videos and play nicely with Vimeo.

Installing Drush using Git

Peter — Thu, 08 Dec 2011 05:09:12 +0000

A short video showing how to install Drush on a local development machine (Ubuntu 11.10) but the steps should be similar for OS X users.

End-users, Drupal and ‘app’ stores

Peter — Sun, 27 Nov 2011 08:25:34 +0000

Photo credit: Andrea_44 at Flickr.

Disclaimer: Drupal is used by different people in different contexts in a variety of ways and the following mind dump is rooted in the specific circumstance that I find myself. My fickle ramblings follow herein.

The first time I learnt about the idea of a reusable, discrete chunk of Drupal functionality was probably when I watched a recording of a Drupalcon session called A Paradigm for Reusable Drupal Features which I encountered early last year when I was trying to wrap my head around using the features module for deployment. The vision outlined in the presentation really articulates well the concept of Drupal as a platform which is an idea that has been snowballing recently.

If you want to build a blog, use WordPress. If you want to build a WordPress, use Drupal.
- paraphrased from a tweet by Steve Purkiss.

Combined with installation profiles and Drupal distributions (not to mention adding drush make to the mix) your average Drupal developer has got some powerful tools and effective strategies for building everything from brochureware to large scale web applications. This existing toolset also provides much of the foundation for Drupal apps which could be downloaded remotely to a working site and installed. It seems like an app store or a number of different app stores are not far away. There’s a Lullabot podcast where the idea is raised and also a Drupal Voices episode where Robert Douglas talks about an Drupal app store (the Lullabot website has a great link round-up).

The two Drupal shops who seem to be breaking ground on the concept are LevelTen and Phase2 Technology (Phase2 is the shop that purchased all of the Drupal IP from Development Seed) . Both have Drupal distributions (OpenEnterprise for Level Ten and OpenPublic for Phase2) that seem to be core to their commercial offerings. I recently watched this video of Randall Knutson from LevelTen breaking down how their app store might work:

I think Randall does a great job of explaining the concept and there’s also a blog post on the Phase2 website which breaks it down in a practical way.

There’s a number of issues that this app store concept brings with it and I think all of the concerns fall into 2 categories:

How an app store affects the Drupal community
How an app store changes the way Drupal sites are produced

I’m not going to write about the Drupal community concerns except to say that addressing those issues will be the biggest challenge to make this idea a reality. The debate is potential mine-field of divisive arguments over the GPL, contributed modules, and the economics behind the Drupal community. Despite the controversy I think what makes the idea of an app store so appealing to developers is the potential to decouple income from time. Most Drupal websites are costed on a time basis no matter how popular or valuable the final outcome is, so the possibility of a business model based on products (apps) seems like the promised land to any developer tired of bug reports and client feature requests. Unfortunately the grass might not be greener on the other side of the billable hour fence. The truth is that a product based business model for development might pose it’s own economic challenges to the Drupal community. Financial analysis from the iPhone app store make for some sobering numbers:

average annual income for a paid iPhone app (after the App store 30%): $3,050

median annual income for a paid iPhone app (after the App store 30%): $682

Those numbers aren’t great but the issues I’m more concerned with at this stage are how an app store changes the way that Drupal websites get produced. In the YouTube video Randall talks about ‘end-users’ making decisions to purchase apps and install them but for many websites developed by smaller shops (like me) these ‘end-users’ are our clients. These clients may be comfortable with some content management and light user management tasks but extending the features or functionality of their website is not an option for most of them. In this context the marketplace for apps are really other Drupal developers, digital marketing agencies, and web design studios. In an app store scenario these stakeholders are what I’m calling the end-1 users. What kind of app-store do the end-1 users want? I think if the app-store idea sticks it will be this marketplace that makes or breaks it.

Fine tuning mouse properties in (x)ubuntu

Peter — Sat, 26 Nov 2011 07:45:12 +0000

My bluetooth mouse is a little too sensitive and almost unusable in Xubuntu 11.10, the settings manager mouse preferences (shown above) doesn’t really cut it. At the lowest acceleration setting it’s still way too jumpy. This handy blog post provides a solution using the xinput program.

[~]$ xinput --list --short
⎡ Virtual core pointer id=2 [master pointer (3)]
⎜ ↳ Virtual core XTEST pointer id=4 [slave pointer (2)]
⎜ ↳ TPPS/2 IBM TrackPoint id=11 [slave pointer (2)]
⎜ ↳ HID 0a5c:4503 id=13 [slave pointer (2)]
⎜ ↳ Logitech Bluetooth Mouse M555b id=15 [slave pointer (2)]
⎣ Virtual core keyboard id=3 [master keyboard (2)]
↳ Virtual core XTEST keyboard id=5 [slave keyboard (3)]
↳ Power Button id=6 [slave keyboard (3)]
↳ Video Bus id=7 [slave keyboard (3)]
↳ Sleep Button id=8 [slave keyboard (3)]
↳ Logitech Logitech USB Headset id=9 [slave keyboard (3)]
↳ AT Translated Set 2 keyboard id=10 [slave keyboard (3)]
↳ ThinkPad Extra Buttons id=12 [slave keyboard (3)]
↳ HID 0a5c:4502 id=14 [slave keyboard (3)]

[~]$ xinput --list-props "Logitech Bluetooth Mouse M555b"
Device 'Logitech Bluetooth Mouse M555b':
Device Enabled (135): 1
Coordinate Transformation Matrix (137): 1.000000, 0.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000, 0.000000, 1.000000
Device Accel Profile (253): 0
Device Accel Constant Deceleration (254): 3.000000
Device Accel Adaptive Deceleration (255): 1.000000
Device Accel Velocity Scaling (256): 1.000000
Evdev Axis Inversion (257): 0, 0
Evdev Axes Swap (259): 0
Axis Labels (260): "Rel X" (145), "Rel Y" (146)
Button Labels (261): "Button Left" (138), "Button Middle" (139), "Button Right" (140), "Button Wheel Up" (141), "Button Wheel Down" (142), "Button Horiz Wheel Left" (143), "Button Horiz Wheel Right" (144), "Button Side" (511), "Button Extra" (512), "Button Forward" (513), "Button Back" (514), "Button Task" (515), "Button Unknown" (252), "Button Unknown" (252), "Button Unknown" (252), "Button Unknown" (252), "Button Unknown" (252), "Button Unknown" (252), "Button Unknown" (252), "Button Unknown" (252), "Button Unknown" (252), "Button Unknown" (252), "Button Unknown" (252), "Button Unknown" (252)
Evdev Middle Button Emulation (262): 0
Evdev Middle Button Timeout (263): 50
Evdev Wheel Emulation (264): 0
Evdev Wheel Emulation Axes (265): 0, 0, 4, 5
Evdev Wheel Emulation Inertia (266): 10
Evdev Wheel Emulation Timeout (267): 200
Evdev Wheel Emulation Button (268): 4
Evdev Drag Lock Buttons (269): 0

Once you’ve identified the appropriate device you can change all of it’s properties. It certainly would be handy if these values were editable through one of the GUI system settings programs.