Pinboard

I’ve been using pinboard for collecting links for five years now. I like it a lot, it feeds the Links page here and most of the enviable stuff.

One of the main things I like about it is its simplicity. Pinboard lists the links, titles, and descriptions without any images or fancy stuff. Adding links via the bookmarklet is simple. It supports the delicious API and has RSS so you can pull sets of links onto blogs and webpages easily enough.

Last week I used the service to play around with python a little. To produce a more visual representation of my recent links. I appreciate the irony. This was an excuse to play with several technologies that I do not know much about.

Last month I had read: this post Homemade RSS aggregator followup by Dr Drang. This shows how to make an RSS reader with python.

I’ve very occasionally played with python for an hour or two but do not really understand the basics. I can however try things repeatedly until they worked.

Planing and playing

My plan was to use the code from Dr Drang, simplifying it to deal with just one RSS feed. Using my pinboard links to produce a webpage. I also wanted to make thumbnails of the websites linked and play with CSS and JavaScript a bit.

The idea was to create the webpage in my dropbox. This could be updated automatically by the script running on my mac. I’ve had dropbox long enough to have a Public folder that is very handy for publishing webpages. This is now a pro and business option only.

Here is the script: pinboardrecent.py and the current output: Recent Pinboard.

Problems

The interesting thing about all of this is the several problems I hit and their solution.

The problem included:

  • Not know how to do something
  • Errors in the code I wrote
  • Errors with webkit2png 1 which I was using to produce the thumbnails.

The answers all involved google and testing and re-testing until things worked. In some all cases I am sure my answers were not the best way of doing things but they worked. I’ve noted most of these in the source. The other think I see in my code is lots of print statements that are commented out. I deleted lots more. There are surely better ways to find out what is going on/going wrong with a script but this works for me.

I am never going to be a programmer, but I get a lot of fun and occasional utility out of playing around like this.

There is a huge push to teach coding to pupils in school going on at the moment. A major reason for this is getting the right skills for employment. I hope a small side benefit will be giving learners the chance to have fun. Producing things for themselves rather than just use services and applications produced for them.

Tinkering with code that you do not understand may not be the best way to get a deep understanding of a language. It may not even help with learning the fundamental concepts. It does in my experience hook you into engaging with learning.

This term at work I’ll be involved in providing training in starting primary pupils coding. I’ll be recommending tinkering as one possible way of getting started and engaing pupils. I am sure some will be as fascinated as me.

  1. webkit2png has problems when trying to get thumbnails of non https sites on El Capitan (Mac OS X 10.11) google allowed me to find a fix and edit the source of webkit2png (which turned out to be python for extra learning).

If you want your kids to have a solid computer science education, encourage them to go build something cool. Not by typing in pedantic command words in a programming environment, but by learning just enough about how that peculiar little blocky world inside their computer works to discover what they and their friends can make with it together.

We shouldn’t be teaching kids “computer science.” Instead, we should provide them plenty of structured opportunities to play with hardware and software. There’s a whole world waiting to be unlocked.

from: Jeff Atwood: Learning to code is overrated – NY Daily News

The article stems from the news that all New York City pupils will be coding in 10 years.  English education is away ahead of them: National curriculum in England: computing programmes of study – GOV.UK

The counter argument is that there are a lot of coding jobs in Scotland waiting for applicants:

Scotland’s tech sector is booming and our employment partners have existing vacancies just waiting to be filled by CodeClan graduates. Learn with CodeClan and become part of shaping the future of the digital world.

from: Home | Digital Skills Academy Scotland | CodeClan
and
Digital tech sector ‘to see strong growth in Scotland’.

This links very much to the views expressed by Charlie Love on Radio #EDUtalk: we have a lack of these skills in Scotland.

I do wonder how we can gear up for typing in pedantic command words in a programming environment with our current decline in computer science teaching. Should we go down the same road as England or would it be better to take Jeff Atwood’s advice? Is there a happy medium?

Image my own from a brief encounter with processing.

Source: Thimble by Mozilla – An online code editor for learners & educators.

Thimble gets a nice update.  Here is the quickest webpage I could make: Kicking the Thimble.

You can now upload files, css, image, javascript ect and create & edit multiple files. Code completion seems a lot better to me too. It grumbles about Safari s oI switched to chrome which is recommended along with FireFox.

Obviously useful for learning to create webpages.

I found this interesting project from One Thing Well‘s rss feed, in my nearly done for, google reader.

Levinux is A Tiny Version of Linux for Education byMike Levin.

Levinux (download ~18 MB) is a tiny virtual Linux server that runs from USB or Dropbox with a double-click (no install) from the desktop of a Mac, Windows or Linux PC—making it the perfect learning environment, and a great way to run & keep your code safe for life! Think of it as an introduction to old-skool “short stack” development—more relevant now then ever as Linux/Unix gets embedded into everything.

from: Levinux – A Tiny Version of Linux for Education – Mike Levin

Basically when you run the application (on mac, windows or linux) you get a very small linux server running in a virtual machine:

Q Screenshot 3

After that you can create and edit html files on the server via ssh and the commandline (or PuTTy on windows).

This fits in very nicely with mty recent excursio into editing on a server via ssh on the PirateBox.

Python git and vim

You can also install Python, vim and git very easily, basically by typing 4 and enter at the screen above:

Q Screenshot 2

This gives you a simple environment to learn python git and vim.

Mike Leven has produced a nice YouTube playlist of instructions to get started: Levinux – YouTube, I’ve followed the first few without any problem at all.

With added dropbox

On of the interesting ways this can be used is by adding the Levinux folder to your dropbox, you can then run the same server on different computers and even different operating systems.

Why this might be useful in the classroom

One of the thing I feel might be tricky in getting young people started with programming might be the complexity of a modern operating system. Even relatively recently when I started using my first mac, it had a tiny hard drive, and after a short while I had seen about every file on it. A simpler setup might be a lot quicker to get started making on. A virtual server that can be reinstalled in a couple of minutes gives a very low risk playground.

Finally here is a quote for a parent, using levinux to teach his child programming which points to some interesting possibilities:

Now one week later I see something happening with my oldest son that was not happening before. He is spending his free time sitting in front of the computer with his Levinux terminal open feverishly typing away on simple little scripts and creating ASCII art while games and movies are just a click away.
Something has changed in the way he sees a computer that I was not expecting. He is no longer consuming media he is creating. The family computer has changed from a flashy pass time to a tool for creativity.

from: ken morgan – Google+ – Something occurred to me today when I was going over Python…

and there is a Levinux Google+ community.

Code eyes

These are some technical notes on some of the changes I’ve made to the standard WordPress site for EDUtalk, I am not sure if they are of much interest to anyone but myself, but writing them up here will, 1. get them clear in my mind, and 2. provide a reference.

The site is running on WordPress 3.5.1. I made a child theme as I wanted to edit some of files and mostly be upgrade proof.

If you have no interest in this you might be interested in the main facts of the move: EDUtalk Has Moved, or just head over to EDUtalk and listen to some great audio.

Plugins

  1. Akismet, spam protection, pretty much a no brainer.
  2. FeedWordPress, this is very much at the heart of the new site, this plugin allows you to syndicate content from other sites, in our case audioboo boos tagged edutalk and iPadio phlogs with the same tag. Posts form these sites with the tag are added to EDUtalk. The plugin also allows us to make the titles link to the original site rather than our own post page, I believe this is a better way to do things for the authors who submit content by tagging.
  3. MediaElement.js – HTML5 Audio and Video, I installed this initially but it is now turned off. Instead I have used this JavaScript myself. As I understand it the plugin will provide html5 and fallback players for audio inserted with a short code player. As a lot of our content comes via FeedWordPress it would not work there unless we manually edited posts.
  4. In the process of importing all of the old content I found the Categories to Tags Converter Importer and WordPress Importer plugin invaluable.
  5. The Safe Redirect Manager plugin redirects links from the old site to the new one, for example, /pages/radio-edutalk to /listen.

Child Theme Files

It seems that the way you best edit a WordPress theme is through Child Themes, this avoids problems when upgrading.

I started by copying the content.php file from the theme to the child theme folder. Here I edited the php to add an html 5 audio player to the top of a post, if the post had an enclosure. I used:$enclosureData = get_post_meta($post->ID, 'enclosure' ); to find out if there was an enclosure. I had a bit of hassle as Audioboo encloses images as well as mp3s, but looped through the enclosures and used the first audio one I found.

I had to edit the main theme function.php file to comment out a bit of code that removed enclosures if they were not linked in the post. This proved a problem when doing some manual edits of the imports. I got information on how to do this from this post: How to stop WordPress 2.8 – 3.5 from deleting enclosures | Kevin J Edwards. The main tool used in building edutalk.cc was google. In this case I edited the theme’s own function.php file, rather than the child themes, as the child theme’s function.php is added to, rather than replacing the parent theme. If there is a better way to do this, I’d like to know.

I did create a child theme function.php and added functions to include the jQuery and MediaElement.js. I then copied the footer.php to the child theme and added a script to added a flash player to the audio tags for browsers that do not play mp3s natively.

jQuery(document).ready(function() {
	jQuery('audio').mediaelementplayer();
});

Pretty simple stuff.

Originally I added a bit more jQuery to hide the audioboo and ipadio players and maps in the post. They were not making the posts look very nice, and I found it difficult to style them. Later on, as I found that the pages were loading very slowly, I went back into the content.php file and added some code to only show the post content, if it was in the Radio Edutalk category. Even with only 6 posts per page this made a huge difference in speeding up the page loading (twice as fast). I changed:

<?php  the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) );  ?>

to

<?php if(in_category(5)){the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) );} ?>

5 being the category for Radio Edutalk, I’ll be adding another category for mailed in audio if needed. Thinking about it it would be best to change to not in the audioboo and ipadio categories.

Screenshotpingdom

Altogether it was not very hard to figure this out with the help of google. WordPress is extremely well documented. The code is also easy to edit, without having to understand the whole thing. There are probably a lot of better ways to do this, and I’d be delighted to find out.

I’d also be interested in any other ways to improve the site, speed it up or add useful features.

Coding john

Even though it was expected I was pretty dismayed when posterous announced that it was shutting down.

Last week I blogged about possible ways forward and as I did so a couple of possible solutions appeared:

  1. Posthaven is the safe place for all your posts forever from some of the development team at posterous a site that will incorporate the best of posterous for $5 a month with a promise to keep going.
  2. Then Tim Owens (timmmmyboy) on Twitter offered us a home at Hippie Hosting where ewe could use WordPress.

So I’ve reserved edutalk on www.posthaven.com for $5 as a possibility, but the temptation to play is too much:

The idea now is to test out WordPress and keep posthaven as a fallback or perhaps as a way of contributing. The rest of this post will briefly cover what I did last weekend to test a few things out and start developing the idea.

So far:

  • I downloaded my own posterous backup from ‘John’s posterous – I always did like sending email‘ and set up a new wordpress blog, After Posterous, to see how that would go.
    Mixed results, the posts and comments showed up, but I lost the nice galleries, I’d have to go through the 300+ posts and set up WP galleries by hand.
  • I installed wp on hippy hosting, I used the system there, can’t recall the name, to install wordpress and it was done in seconds. I’ve normally have done this using ftp. Slightly worrying that this is so easy.
  • I got a new domain as a place holder: http://www.edutalk.info while developing the new site.
  • I added the FeedWordPress plugin and set it up to auto import boos tagged edutalk. This worked really well. pulling in all the boos in the RSS feed very quickly and treating them well. Linking the audio and creating the enclosures for podcasting. I am delighted with this.
  • The boos are posted tagged audioboo, it looks like I might have to think about the formatting a little bit.
  • I downloaded the posterous back up for SLFtalk – Audio publishing by attendees at the Scottish Learning Festival to have a look at the format, it seems less daunting that the 2GB edutalk backup.
    I’ve now got something to worry about. For some reason posterous have decided that there backups don’t link audio properly:

    What about audio?
    The Posterous export file doesn’t currently provide links to audio files, so there’s not a way for us to import them automatically. If you have audio files, you’ll need to find them in the “audio” folder within the backup zip file and manually upload them to the relevant posts.


    from: Import from Posterous — Support — WordPress.com
    This is going to be tricky given the number of posts we have.

Thinking about

  • It looks like to get the posts with audio up I’ll have to do something automatic. I’d need to, say: parse the posterous backup, to extract information; identify associated audio files; upload the audio, probably by ftp; create the information needed for a post (including enclosure info) and create the post, probably with the MetaWebLogAPI. The problem will be that the posts will vary depending on the source, audioboo, email, directly through the web. Some posts have audio that was uploaded to posterous, some link to audioboo. I hope to cobble a solution to this with SuperCard, AppleScript and string.
  • I’ll try to get enclosures showing up in posts as audio players, hopefully html 5 with fall back for older browsers and ones that do not support mp3. I think I saw a snippet of php for that somewhere in the wordpress help.
  • I am wondering how the change from the test domain, edutalk.info to edutalk.cc will go, will I have to fix all the urls for enclosures in the wordpress database? Anyone know if this is easy?
  • I’ve no idea how to handle submission via email. Posterous did a great job of this, especially dealing with different filetypes.

Luckily there is a couple of months to get this sorted…

image idea from here

Open Source Edition of LiveCode by RunRev Ltd — Kickstarter

Reinventing HyperCard for the 21st Century. A free open source app creation platform for non-programmers and programmers alike.

I just backed this project on Kickstarter. It aims to take LiveCode open source. LiveCode is a x-platform clone of the old macheads favourite HyperCard.

HyperCard is the application that turned me into someone who disliked computers and regarded then an improved Banda machine (Banda, HyperCard, really showing my age) into an enthusiast. Folk with less tolerant spouses should step away from the likes of LiveCode.

I am not a current user of LiveCode, although I bough a license a year or so ago. I tend to use the mac only SuperCard. At one time I even made some educational shareware with HyperCard and then SuperCard. Didn’t make much money but had a lot of fun. Over the years I’ve knocked up tools to do various fun things (from Animating Gifs to logging kids onto glow), but the real strength of LiveCode may be in coding for pupils. RunRev, the company that produce LiveCode think so too:

We believe that computational thinking and programming is a key form of digital literacy and that enabling a new generation to write interactive software is critically important in today’s economy.

LiveCode is used in hundreds of schools around the world to teach programming in STEM (science, technology, engineering and math) classes. It is uniquely suited for students in the 13 to 18 age groups. Every school that has used LiveCode for more than a year has seen a doubling of uptake in advanced computer science classes for boys and girls as well as an increase in exam pass rates!

I would imagine that the easy entry to programming that LiveCode provides (going on my HyperCard and Supercard experience here) would help get pupils that would not normally be interested in programming started while providing a accelerated development path for the code friendly ones.

Anyway I thought it worth a punt. RunRev are based in Edinburgh so a local company.

Last Sunday in the Observer I was reading Why all our kids should be taught how to code and have been following with great interest the boos by Alan O’Donohoe (teknoteacher) Submitted to EDUtalk
I am also interested in the difference between digital literacy/ fluency and coding beautifuly described by Josie Fraser in response to Mr Gove’s surprising enthusiasm for coding SocialTech: Computer Science is not Digital Literacy:

It’s dismaying then, to see in a week where we are seeing a huge move forward in the promotion of technology and a fresh look at how ICT as a subject area is designed and implemented in schools, to see digital literacy being used as an interchangeable term for computer science skills.

With the introduction of iPads into the mix as a really powerful tool for curricular ict. I am also intrigued by the tension between this back to programming and the use of ict to support learning. Brief visits to the primary classes piloting 1-2-1 have been exciting and gone a long way to convincing me that this is an important direction for ict in education.
Although I hope the iPads are only for consumption myth has been put to bed I’ve been wondering if there are ways they can support programming in education. It has often been pointed out that the reluctance of Apple to allow apps that produce executable code will hinder their use for coding.
(As a primary teacher this is well out of my depth or experience but fun as a sort of thought experiment.)
Some of the efforts to enthuse pupils and others in coding have started with HTML, CSS and JavaScript. (Hackasaurus and the like links). I though that might be a good place to start.
photoI’ve blogged before about Textastic – Text, Code and Markup Editor with Syntax Highlighting – FTP, SFTP, Dropbox – for iPad, the web page title says most of it.

a challenge of sorts

I though I’d give it a go and create a page or two with some sort of JavaScript stuff. To keep things nice and simple I thought I’d use the Dropbox functionality to publish the pages created to my Dropbox public folder. In a teaching situation this would avoiding FTP uploading.

templates and images

The first nice thing I noticed was that textastic supplies a few basic html templates which gets you off to a nice start. I created a folder in textastic then some files. Next I clicked on the globe to access my Dropbox. You see a listing of a local folder and one in Dropbox it is simple to transfer files back and forth. You can also pull images in from Dropbox to the textastic folder if you want to added images to your web page. This means a trip to the Dropbox app to add photos to that folder from the iPad photos.
I could not find an app on my iPad that would let me resize images where I could see pixels rather than manipulating with my fingers, but I am sure such an app exists.

auto complete

Textastic supports autocomplete in a TextMate like way type a < and say a p it pops a list of possible tags, selecte one and it is completed. The app then put the cursor in a good position, eg between the opening and closing tag of a paragraph to ready to type in the first parameter of a link. With more complex tags it wil select the first edit then tab through the other section indicated by a wee triangle:


update: the first image I uploaded Looked ok on the iPad but was unreadable on my desktop. I’ve replaced it. Image editing for blogging is a bit of a challenge on the iPad, but I am learning.
It was pretty simple to create a HTML page and link it to a CSS file in the same folder in textastic, easy to publish both to Dropbox. Textastic allows you to locally preview and it is easy enough to switch to Safari too.

JavaScript challenge

Since I know little JavaScript this should be a fairy realistic test of the iPad as a tool to learn coding. I decided to try assignment 3 from Mashups: Remixing the Web a course from New York University. The assignment was to create a lolcats memory game. I decided to make one with Flickr images. There are a few good hints in the assignment but I need to do a few things: look up JavaScript references on the web, preview and debug. Reference was easy to do by switching to safari and searching. Textastic supports preview and firebug. I also turned on the safari debug console. Textastic supports auto complete for JavaScript too.
The result is not a polished or complex piece of work, but I’ve stretched myself a wee bit. And managed to stick to the iPad throughout.

update a couple of tweets from @fraserspeirs who will know a lot more about this than me:


– Posted using BlogPress from my iPad

Location:Crow Rd,Glasgow,United Kingdom

Popcorn Hackasaurus

Yesterday I heard a few intriguing boos from Mozilla Festival by Doug Belshaw and Leon Cychwhich sent me on a day trip round the internet. I discovered:

Hackasaurus makes it easy to mash up and change any web page like magic. You can also create your own webpages to share with your friends, all within your browser. for which there is an educators guide and even a lesson plan.

and:

Popcorn.js is an HTML5 media framework written in JavaScript for filmmakers, web developers, and anyone who wants to create time-based interactive media on the web. Popcorn.js is part of Mozilla’s Popcorn project.

among a host of other interesting things. Rather than blog about it I used these tools to create somethings:

A spoof 2015 BBC News – X-RAY GoGGLES improves pupils performance in exams

Playing with hackasaurus and popcorn

I think that hackasaurus in particular could be very useful in the classroom. Popcorn gives us a way to make complex media projects in particular HyperVidio and HyperAudio which act in the same way as HyperText. I’d love some feedeback on this stuff, if you think it could work in your classroom?