Python Northeast: The Scientist-Programmer

In a new location at Clavering House (and in a weird scheduling quirk, on at the same time as the iPhone group—I walked into the wrong room before realising I’d misheard “iPhone” for “Python”!), this month’s Python North East went boldly where no meetup has gone before … the Python Song!

OK, this was in the leadup as there was a delay, but it cannot be unheard. (The lyrics are pretty clever though). There was also heated discussion as to whether MongoDB is a good framework to use (arguments against included that it doesn’t scale well and fails silently: “it’s good for messing around, but for proper stuff it is a pain”, and better frameworks exist for big projects such as Cassandra, Elastase Search or Solar/Sphinx).

No, this month’s meetup showed how coding can be used in the hard sciences, in this case, modeling neutron diffraction (not quite reversing the polarity but pretty close!). Talking to us about how python and particularly NumPy can help do this was Rowan Hargreaves.

Hargreaves is part of the ISIS project (not named after the river, but the Egyptian goddess, as they bring together various bits, as the goddess did when her husband was chopped into pieces by another god). Using enough electricity to power a medium sized town, the project in an impressive structure with massive chutes to allow experiments with splitting deuterium (heavily oxidised water) into particles. His work is involves a two way process of doing experiments, attempting to model the behaviour of the diffraction (how the particles bounce off), testing it and continuing the refining of the model. Each cycle can take six months, so this isn’t your high school science! (For the record, he also recommends Python Scripting for Computational Science as a good primer for his type of work.)

This is where NumPy comes in. When you’re doing hugely complex equations, time (and memory) savings are key. Hargreaves noticed huge improvements in speed with his modelling when using the framework, as noted by NASA and replicated below..

Packages/Compilers Elapsed Time (s)
Python 48.55
NumPy 0.96
Matlab 2.398
gfortran 0.540
gfortran with -O3 0.280
ifort 0.276
ifort with -O3 0.2600
Java 12.5518

Various processing speeds of programming languages, taken from NASA

Sure, Pascal and Fortran are faster … but then you have to write Pascal or Fortran.

He also gave a number of basic demos to show how it works.

Rowan Hargreaves giving a demo

He has noticed a few random quirks and inconsistencies (e.g. how you name things in one function may have to be different in another) but all in all has found it useful. He can also use it to pass in some of his boss’s FORTRAN data (yes, some people stick to what they were taught) or conversely, pass his data through to the nicer visual modellers around.

He also made some interesting points about science and coding. He had a great quote about scientist doing computing only ever experimenting with it (my Google-fu has failed to bring up the source, sadly). [EDIT: thanks Rowan for clearing this up, the quote is:

“In scientific computing, we typically don’t know what we’re doing.” —Fernando Pérez (founder of iPython)]

However, there is a more serious aspect of this: there’s no real reason for people in academia to investigate coding in any depth, let alone make any contributions in this respect, as it’s not recognised as valid contributions to research (or in English HE terms “contributing to the REF”). I’d point to the most startling example of this as the person who created the popular open source bibliographic software Zotero being denied tenure as he had not created enough ‘research outputs’.

On a happier note, this talk was a reminder of how much bleed there is between disciplines when it comes to coding. You might be a web designer, journalist, artist, or in this instance scientist-programmer, in all instances, coding has some use.

[UPDATE March 2013]

Data Community DC has put together a blog post on being a data scientist with Python that is well worth looking at (as is the related Hacker News Discussion).

Booting Up With Bootstrap

As one of my research projects (soon to be revealed), I’ve been considering how best to decide on a design aesthetic. Here are the interesting points to consider when designing an object in relation to research:

  • It needs to be designed enough to do the job. (I don’t believe that any of the default frameworks, be it WordPress’s Twenty Twelve, Drupal’s Garland or Bartik, or the Django default template really achieve this, particularly as for those in the know they anchor them to a delivery system).
  • Conversely, you don’t want to design it too much (it’s not the thing being measured!). And pragmatically, time spent working on the design is time taken away from actually doing work on the site.
  • It helps if it signifies a work in progress somewhat.

A good comparison to this is Tony Dunne’s Hertzian Tales projects. At least one academic how knows his work pointed out how the crazier elements are wrapped in an IKEA aesthetic (e.g. the table for the dreaming navigation), thus making it easy to tell what it designed and what it merely placeholder design.

With this in mind, I believe that Bootstrap (formerly Twitter Bootstrap) is a good means of achieving this balance.

Why Bootstrap? As a fully fledged framework, it’s well resolved to be nice enough to use. I used to use 960gs for a similar reason, but found that it was too bare bones at times to be useful (and thus a pain to deploy!)

The popularity of the framework is highlighted by a tumblr dedicated to sites using it. While there have been a number of posts feeling that it has become overused (and noting alternatives), others still believe it is useful (and that the sameness is merely from people not configuring the CSS, or using themes that do it for them).

However, the interesting thing is that for a site intended to not be judged on its aesthetic, that samey-ness can actually be very useful, as it says “hey, I’m using a common but platform agnostic way of showing my work.”

Everything You Always Wanted To Know About Presentations But Were Afraid To Ask

Last year, I ran into tech man-about-town Peter Nelson at a Starbucks. (Yeah, I know they don't pay tax. I get coffee from Costa too!) He mentioned a startup he was mentoring to do with presentations, and I got talking about the various people I followed in regards to presentations. Fast forward a few months, and I was asked to talk about what I knew about presentations for the Design Interest event relating to the company. What do talk about? It's always a little hard to talk about a topic that a company specialises in. So, after racking my brains for a way in, I found a way.

Cos if you have nothing to lose, you might as well be a little irreverent.

My crowning glory from the event was getting to unashamedly wear Woody Allen style spectacles despite having perfect vision.

Woody Vicky

Woody Vicky. Though I could also be mimicking Bob Buzzard from A Very Peculiar Practice!

The only problem is now that I want to keep doing it, despite my morals that it's wrong to wear glasses purely for fashion. (Hell, Elton John did it and ruined his eyesight in the process!) My notes on the event in general are on the Design Interest blog.

Back to Basics, Kinda: Hardcoding A One Page Responsive Site

When was the last time you hard coded a website? I can’t even really remember. I think it would have been in 2009 at the very latest, with a small brochureware site. Certainly I remember testing for IE6 and 7.

Since then, I’ve been working on WordPress and Drupal (and even the odd Joomla theme). While it brings its own set of issues, the one thing it does mean is that you usually start with something.

However, I was recently asked to help out a colleague who was waiting for their content managed site to be finished (the developer had got sick and so was a few weeks behind) and so needed a one-page site to tide her over until it was done. When I ever end up doing projects to help out other people, I try to use it as a means of trying something out I’d like to do. In this case, it was trying to make a responsive site (and obviously HTML5 and CSS3). And make it by hand, as the WordPress site could be ready in a matter of weeks if she’s lucky. It was definitely a blast from the past. What did I find?

There’s a framework for that.

I settled on the Initializer framework, as it included a lot of starters, and had a layout similar to what I wanted. (Were I going for more of a landing page look, I’d have used Bootstrap). There were also some beautiful themes available, but they didn’t use Javascript and so didn’t shift. (One could argue that this is a good thing, but I like being able to shift things around!)

You know that ‘bootstrap look’? It’s Helvetica Neue at font-weight: 200.

Bootstrap

The font used on Bootstrap, and the related code

I’d always wondered what exactly it was about the Twitter Bootstrap fontstack that made it look so good. It turned out that they’d been using font-weights, something which I remember messing around with way back in the day but not really coming back to. I personally have memories of Helvetica Neue rendering horribly on my then-work’s computers, but I suspect things have changed since then.

Design around the key breakpoint.

Full and Mobile

The mobile and full widths…

Breakpoint

… and around the 768 breakpoint

For me, that was 768px, the point where the system snaps between no floats and a two column float. I’d been working from the up to 1180 breakpoint and got myself rather confused in regards to percentages and the like. What’s more, just larger than the breakpoint is where the design will look its worst if you mess up something. Blocks can be problematic at mobile size. The design I was theming was beautiful at a higher screen-width, but as soon as I narrowed it the blocks became excessive. In the end, I opted to take the body text entirely out of the bock and to just sit on the body.

[EDIT: since I’ve written this, I’ve seen Mark Boulton’s thoughtful post about ‘the inbetween’. He suggests to specifically look out for the following things when the viewport changes:

  • Type size and leading. Does it need to change?
  • White space (macro and micro). Do you need to adjust margins and padding?
  • Vertical space. Do you need to reduce it and make the content more or less dense?
  • Flow. How is the readers eye movement going to change as you change these elements?
  • Words. Are there now too many on one line? Or too few?
  • Source order. Are the right things in the right place?

The one joy about using a framework such as Bootstrap is that these things have generally been considered, but it’s still a worthwhile list. I know I changed the source order of some of the blocks after considering where they would fall on a mobile screen.

Boulton also notes that his studio tends to keep all the CSS together in one stylesheet, but are also accounting for more rather than less viewports.]

IE6 is well and truly dead.

I remember having to test things in IE6, but this framework pretty much puts up a message saying “you too old for this place”. (I have to admit that I haven’t tested this design in different browsers as I hope that the shivs should fix them).

You’ll occasionally yearn for easy PHP and plugins/modules

Twitter

Twitter pulled in from Seaofclouds jQuery framework

Plugging in services is, as you might expect, a lot more problematic —or less themeable —on a handcoded site. One of the aspects of the design was a twitter feed. This would be a piece of cake on a CMS thanks to plugins or modules (or even just being able to grab PHP code) but on a hard-coded site is more problematic as you either have to create a separate php file to feed in the information, use the (functional but highly branded) official widgets, or use Javacript. I went for the latter as the framework already used jQuery, and it was cleaner. I found a useful and highly customisable JS framework for showing tweets. [EDIT JUNE 2013: as Twitter has changed this API the code no longer works on the site]. There is a point where you realise it’s not worth staying hard-coded. There was the option to put images on the page. I realised that the time of getting a library and sorting out how a slideshow would work probably wasn’t worth it, given that the site would be replaced by a content managed one that would make this a heck of a lot easier.

HTML5-what?

I have to admit that I’m still not entirely clear about all of the new attributes available to me (unlike the CSS stuff, which we tend to be aware of as they’re obviously useful). I have a few things that I’m not sure are semantically correct, like having more than one footer. And I suspect there are things like date attributes that I could use. It reminded me that I need to investigate them, even if CMSes like Drupal are still struggling to get them into their core code outputs.

The land of the imageless.

I don’t know about other people, but I’d been taught to load your site logo using background CSS. Which is usually fine … until you have a site without a single image on it. It means that if anyone shares the website on social media, there’s nothing available to show as a preview. I don’t know if this is really a problem, given it’s a quirk of one page websites, but something that’s worth thinking about.

For those that are interested in seeing the holding page, it’s here. (Again, it may not be up for that long).

[EDIT: there’s also a good article by Drew Clemens over on Smashing Magazine about doing responsive design.]