thingsinjars

  • 27 Oct 2012

    Explanating Experiment Follow-up

    A year ago, I started a little experiment (and not one of my usual web experiments).

    I decided to give away my book, Explanating, for free. The website has links to download the book without charge and also links through to Amazon and Lulu. I asked people to download the free one then, if they enjoyed it, they could come back and buy it.

    Twelve months later, I now have the answer.

    • Free: 315
    • Amazon: 2
    • Lulu: 0

    Erm. Yeah. Not quite as successful as I would have liked. Still, the point was to measure the 'conversion rate'. Admittedly, it's a small sample size but it would appear to be about 0.6%. At this rate, I only need another 97,465,886 people to download the free one and I'll have made £1,000,000! Sweet!

    Design, Cartoons, Not Geek

  • 28 May 2012

    A collection of bookmarklets

    Bookmarklets are the handiest little things. In case you don't know (which I'm sure you do), they're small chunks of JS that you store in your browser's Bookmarks or Favourites section which you can launch while looking at any web page. I write bookmarklets for all kinds of different tasks – navigating quickly around the build monitor at work, filling in tricky forms that my browser autocomplete doesn't handle, etc.

    Here are a few of bookmarklets I find extremely useful for web development. To add them to your browser, simply drag the link on the title into your bookmark bar, hold shift down and drag or right-click and 'Add to Favourites', depending on what browser you're in.

    Add JS to the page by URL

    This will allow you to add any script you like to the current page. This can be particularly useful if you want to add a certain library or plugin to a page to investigate it further.

    javascript:(function(){document.body.appendChild(document.createElement('script')).src=prompt('Script to add');})();

    Add the latest CDN jQuery to the page

    A variation on the above bookmarklet, this simply adds the latest version of jQuery. If you want to be able to play with a page and are familiar with jQuery, this will ensure that it is loaded and attached.

    javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://code.jquery.com/jquery-latest.min.js'})();

    Add CSS to the page by URL

    Add any stylesheet to the current page with a particular URL. This is handy if you want to demo variations to clients, I find. particularly if you predefine the CSS URL.

    javascript:(function(d){if(d.createStyleSheet)%20{d.createStyleSheet(%20u%20);}%20else%20{var%20css=d.createElement(%27style%27),u=prompt(%27CSS%20to%20add%27);css.setAttribute(%22type%22,%22text/css%22);css.appendChild(document.createTextNode(%22@import%20url(%22+u+%22)%22));d.getElementsByTagName(%22head%22)[0].appendChild(css);}}(document))

    Submit this page to the webdev subreddit

    This isn't so much a web dev helper, more a general helper. I use this (or a variation thereof) to submit posts to specific reddits with fields prefilled. This bookmarklet defaults to the webdev subreddit.

    javascript:window.location=%22http://www.reddit.com/r/webdev/submit?url=%22+encodeURIComponent(window.location)+'&title='+encodeURIComponent(document.title);void(0);

    Add a CSS rule to the page

    I can't remember whether I wrote this one or if I found it somewhere. The 'x<style>' is something from the middle of jQuery, though. Anyhow.

    This allows you to add a style block directly into the page. This is useful for small CSS injections where the browser's web inspector is unavailable or incapable. Even though it's a single prompt that pops up, there's no reason why you can't past an entire stylesheet in there. I sometimes find myself doing that when I'm previewing designs on a production server.

    javascript:(function(){var div = document.createElement('div'); div.innerHTML ='x<style>' +prompt('Style to add')+ '</style>';document.body.appendChild(div.lastChild);})();

    Development, Design, Geek, CSS, Javascript

  • 16 Jan 2012

    ImpressJS Tools

    While putting together last week's promo video for Museum140 (a vote'd be awsm, btw), I knocked up a few tools to make my life easier. As I always say, if you find something you like, make a plugin for it. Seriously, I always say that. That might even be how I proposed to my wife, I'll have to check.

    Anyway.

    Play

    This is a simple timing helper. It just provides a little array you can push slide durations into and at the end, you call 'play'. I can't see many uses for this other than in creating videos.

    ImpressJS.play(3000);  //Set the first slide duration for 3 seconds
    ImpressJS.play(1000);  //Set the second slide duration for 1 second
    ImpressJS.play(); //Play from the start
    

    Edit

    This is much more useful.

    If this script is included in the page (after the impress.js script), you can drag your slides around, rotate and scale them into exactly the position you want. Once you're happy, you can get the current HTML output onto the console for pasting back into your original slideshow file. I could have snuck in a drag-n-drop file handler but that would make it Chrome only.

    Disclaimer

    These tools rely on ImpressJS having a public API which it currently doesn't have. It's obviously high on the author's priority list (given the amount of discussion it's raised) but, as too many pull requests spoil the broth, I've made a little fork of my own, added the public functions the tools require and I'll update them once the main repository's settled down a bit.

    Download

    These are available in the tools folder of this fork of impress.js. Each one contains an example. Hopefully, these will be updated to use the public API as soon as it's available.

    Development, Design, Javascript

  • 10 Jan 2012

    Museum140 Shorty

    As regular readers are probably aware, one of my side projects is helping out Museum140 with tech and design support (building websites, designing stickers, etc). Jenni's the main driving force behind some of the coolest “Museums and Social Media” projects of the past year.

    The Museum140 project is in the running for a Shorty Award so I thought I'd help out by making a promo video. Of course, it's always best to play to your strengths so I built the video as a web page…

    ImpressJS

    HTML5 slideshows are all pretty cool (I even used one myself a few months back) but most of them deliberately emulate traditional slide presentations. When I saw ImpressJS for the first time last week, I was astounded. Its style is based on prezi.com but built using CSS3 rather than Flash. As well as being an inventive way of giving presentations, it also gave me an idea.

    A couple of hours coding later and we've got a simple but stylish video with every word and phrase positioned perfectly. I wrote a little helper function to assist in creating a consistent timeline and recorded it in Screenflow. After that, I spent 10 minutes with the other kind of keyboard and came out with a nice little piece of background music, too.

    The Video

    There you go, ImpressJS is not only good for slideshow but also promo videos. Not bad.

    Vote?

    It would also be remiss of me if I didn't ask those of you with a twitter account to at least consider voting.

    Design

  • newer posts
  • older posts

Categories

Toys, Guides, Opinion, Geek, Non-geek, Development, Design, CSS, JS, Open-source Ideas, Cartoons, Photos

Shop

Colourful clothes for colourful kids

I'm currently reading

Projects

  • Awsm Street – Kid's clothing
  • Stickture
  • Explanating
  • Open Source Snacks
  • My life in sans-serif
  • My life in monospace
Simon Madine (thingsinjars)

@thingsinjars.com

Hi, I’m Simon Madine and I make music, write books and code.

I’m the Engineering Lead for komment.

© 2025 Simon Madine