seojeek

Month: December 2015

  • Yeoman Reveal.js Generator: Quick Reveal Presentations

    A while back I gave a Reveal.js presentation on how to create a Reveal.js presentation using the scaffolding tool Yeoman. It’s been pretty helpful for building quick presentations and distributing them through my github account for anyone to see and I keep going back to that presentation when I start my next one, so I thought it should be in a blog post.

    If you want to view the actual presentation, give it a whirl.

    Let’s start with the basics. Node.js comes with npm so let’s make sure we have the most up-to-date node installed on our system.

    node

    sudo npm cache clean -f
sudo npm install -g n
sudo n stable
npm -v

    Update npm

    sudo npm install npm -g

    yeoman

    Update yeoman

    npm install -g yo

    Update the Reveal.js Generator

    npm install -g generator-reveal

    yo yeveal | Build a new presentation

    Navigate to a new directory

    yo reveal

    Follow the instructions. Be sure to include your github account name in order to deploy your presentation to a github page.

    yo reveal:slide "Slide title" --markdown

    Boom, this builds you a new slide in your slides directory.

    No just run grunt serve to see your presentation (with live reload) in your browser:

    grunt serve
    • Grunt is a task runner
    • You can build your own tasks for things like compiling CSS.
    • Or you can rely on others’ grunt files. For Reveal’s generator, this already includes:
      • Node server
      • Autoreload
      • Lint
      • Deploy (to github in this case)

    Super handy.

    Bonus: Scaling Images on your slides

    I ran into this issue a few times when I would insert an image and it just wouldn’t scale to the slide right. I think this is very important if you’re giving a talk. To fix, just use some quick CSS magic to help you.

    <div class="big-image-container">
    <img class="big-image" src="myimage.jpg"/>
</div>

    For the container class:

    .reveal div .big-image-container {
    max-height:80%;
    max-width:70%;
    margin:0 auto;
}

    And the image class:

    .reveal img.big-image {
    height:auto;
    margin:0 auto;
}

  • Twitter REST API with geocode lookup

    Recently I was given the task of building a search feature that will find all geolocations of Tweets with a keyword and/or hashtag.

    The Twitter REST API has the following limitations:

    • User must enable Location for their Tweet — This removes a lot of the sample size
    • A Tweet REST API query can only target specific geo coordinates, along with a radius
    • The Search API’s recent index only spans for the last 6-9 days

    Using my Drupal 8 Twitter module as a template, I was easily able to make this work for finding locations within the intercontinental United States.

    $params = array(
     "q" => $this->keyword,
     "count" => $this->num_results,
     "result_type" => "mixed",
     "lang" => "en",
     "geocode" => "39.8,-95.583068847656,2500km",
 );
 $tweets = $twitter->get("search/tweets", $params);

    Basically, I’m polling for all tweets with a radius of our country starting in roughly the middle. Thanks to ThoughtFacet for the tip.

    So this is a nice workaround if you are looking for Tweets that have geolocations.