Facebook’s Yarn is the shiznit

TL;DR

As the saying goes: You don’t know the extent of the pain you have suffered until you have found some relief. Okay, well, that may not be a saying at all, but it will be the feeling you have when you make the switch from npm to Yarn.

The Problem

npm is slow, non-deterministic AND has been the best way to manage your node.js package installations until now.

How Yarn Came to Be

Facebook decided that the bandaids and workarounds they employed to make npm scale to their needs had gone far enough. They decided to build their own tool that cleaned up the package install workflow. You can read more about it on Facebook’s Yarn site, but I’ll save you the time: Use Yarn!

Reasons to Switch

  1. Yarn uses the same package.json configs you have setup in your repo
  2. Once Yarn is installed (with some irony — using npm), replace your “npm install” with “yarn” and you’re done
  3.  The install time is 15x faster. I tested Yarn out on a simple React environment I’ve been using. Using npm, the installation took about 5 minutes (usually ran during a bathroom break). Yarn took about 20 seconds. Nuff said.

Making the Switch

In your project’s root directory, where package.json is located (or where you usually run “npm install”):

#> npm install -g yarn

#> yarn

So, wow, right?! Why the hell have I been wasting time with npm? No longer.

The real question is – why are you?

 

Update: Yarn is having an upgrade issue. To resolve follow instructions here: https://github.com/yarnpkg/yarn/issues/1139#issuecomment-285935082

GoGong: An open-source, non-SaaS, screen capture & share platform

There are many awesome Saas-based screen capture & share services in the market today. Typically they offer a client-app that, when installed, listens in the background for all your screen captures. Once a screen capture is taken, the app seamlessly uploads the image to the cloud and provides the user with a URL (added to their clipboard) that they can easily share with others. (For example, you can checkout two captures I’ve taken with Sketch and CloudApp.)

I love those apps! 99% of the time they fill my use cases perfectly. However, recently I was working on an intranet with hundreds of users and no access to a public internet. Of all the capture & share services I knew of, none could accommodate a closed network system. Do to that environment, I was forced to manually upload my screenshots as attachments when massaging my peers – which was a real PIA!

Enter GoGong.

I created GoGong as an open-source project to provide those working on a closed network access to a screen captire & share system; without concern of having any copied material exposed to the outside world. You can read more about the project, download the server and mac DMG, and contribute to the effort here:

https://sshadmand.github.io/GoGong/

In short, GoGong provides:

  • An installable DMG OSX client
  • A server to receive and host your uploaded captures
  • A completly open-sourced project
  • A platform that do not require a public internet connection

Hope you find it useful!

Docker for Dummies

Updated 7/12/2016: Applying a web server, See end of the post.

Updated 9/29/2016: Mounting Docker so you can edit container using IDE

This week I decided it was high time I learned docker. Below is how I wish a “getting started page” was laid out for me in retrospect; would have saved a lot of time….

At a high-level, Docker is a VM  that is more light-weight and easier to install, manage, and customize than others. It is a great way to ensure everyone is deploying their project in the exact same way, and in the exact same environment. (The non-high-level version.)

Until now docker machines were needed to run Docker on a mac. Now you can just install the docker OS X app and run it the “Quick Start Terminal” to have your environment started properly (Update: The latest mac version runs in the background and adds a docker icon to your Mac menu bar). In short, if you don’t use docker-machine nor the Quick Start Terminal then you will get a “Cannot connect to the Docker daemon. Is the docker daemon running on this host?” error.

First off, here are some very useful commands that keep you aware of the state of Docker’s containers …

#> docker ps

#> docker ps -a

and images…

#> docker images

Now, let’s create some containers! A container is an instance of an image that is either in a running or stopped state.

To create a running container that is based on a standard Ubuntu image:

#> docker run -it –name my-container ubuntu

This command will pull the image (if needed) and run the docker container. Once the container is built it will be named “my-container” (based on the –name parameter) and viewable using:

#> docker ps

(Shows all running containers.)

#> docker ps -a

(Shows all containers whether they are running or not.)

If you ever want to interact with your Docker container in Shell you will need to include the “-t” param. It ensures you have TTY setup for interaction. In order to detach from a container, while keeping it running, hit CTRL+Q then CTRL+P. Otherwise the container will stop upon exit.

The -i parameter starts the container “attached”. This means you will immediately be able to use terminal from within the running container. If you do not include the “-t” with the “-i” you will not be able to interact with the attached container in shell.

 Alternatively, if you use the -d parameter instead of the -i parameter, your container will be created in “detached” mode. Meaning it will be running in the background. As long as you include “-t” in your “run” command you will be able to attach to your container’s terminal at any time.

An example of running  a container in detached mode:

#> docker run -td –name my-container-2 ubuntu

Next, let’s see how container react to a stop command.

Create both containers above and run the “docker ps” and “docker ps -a” commands to see the running containers. Then, stop one of the containers using:

#> docker stop [conatiner id]

… and then run “docker ps” and “docker ps -a” again. Do this over various permutation of the above run commands and parameters; you’ll get the hang of it.

Now that you have a container created based on a standard ubuntu image, let’s see if you can create a custom Image of your own.

A Dockerfile is used to define how the image should be pre-configured once built. Here you can make sure you have all your required packages and structure set up – like a light-weight puppet file. The most simple example of a Dockerfile contents is a single line like this:

FROM ubuntu:latest

Which says build my custom image with the latest ubuntu image. Save that one-liner Dockerfile in a file in your Present Working Directory and call it “Dockerfile”.

That Dockerfile will get the latest Ubuntu image as its only configuration requirement.

To create our custom image based on that Dockerfile:

#> docker build -t my-image .

Here we are asking docker to build an image and give it a name (using the -t parameter) “my-image”. The last parameter “.” tells Docker where the Dockerfile is located – in this case the PWD.

Now you can run …

#> docker images

… to see all the images which should now include “ubuntu” and your newly created “my-image”.

Just as we used Ubuntu as the base image in the beginning of this tutorial, we can now use our custom “my-image” image to to create our new running containers.

For example:

#> docker run -it –name my-container-3 my-image

 UPDATE: Applying a Web Server

When learning on your own, finding an answer has more to do with knowing the right question than anything else. For a while I kept looking up ways to connect my server’s apache config to the running docker container. I readily found info on mapping ports (for example, “-p 8080:80”), but wanted to know how to point my server’s inbound traffic of 8080 to the container’s localhost port 80’s traffic.  This was entirely the wrong way of looking at it.

Docker creates a sort of IP tunnel between your server and the container. There is no need to create any hosts (or vhosts) on your server, or to even setup apache on your server for that matter, to establish the connection to your running container.

That may have seemed obvious to everyone else, but it finally clicked for me today.

This step-by-step tutorial finally nailed it for me:

https://deis.com/blog/2016/connecting-docker-containers-1/

In short, you will create a container, install apache2 within that container, run apache2 within that container (by mapping your server inbound port to the containers inbound port), and voila – done!

Note: Be sure to use “EXPOSE” in your Dockerfile to open up the port you will be using in your run command. WIthout it you will have connection issues. For example, in your Dockerfile, include:

EXPOSE 8000

And then in your run command use:

#> docker run -it -p 8000:8000

Yet another important note: If you decide to run your web server in dev mode, make sure that you bind you container IP as well as your port. Some dev web servers (like django) spin up their web server under port 127.0.0.0, when docker listens on 0.0.0.0. So, in the case of spinning up a django dev server in your conainter, be sure to specify:

#> ./manage.py runserver 0.0.0.0:8000

UPDATE: Mounting Docker to Host to edit Container using IDE

Having to build your docker container every time you want to deploy locally is a PIA. I just learned today that you can mount your local host folders to a mounted volume inside of your docker container. Once you have built your image simply run your docker container using the -v param like so:

#> docker run -it -v /Users/myuser/repos/my-project:/tmp [image-name] /bin/bash

Where “/Users/myuser/repos/my-project” is the folder on your local machine you want to be available inside of your container, and “/tmp” being the directory you can access your volume from within the running container.

Once that is done, just edit the files locally in “/Users/myuser/repos/my-project” and it will be in perfect sync with your docker code!

 

New FB Messenger Bot Port to Python Based on Quickstart Guide

FB Messenger Python Port on StackOverflow

The current Quickstart guide for the new FB Messenger Chatbot is in Node.JS. I am currently working on a project in Python and couldn’t find any Copy & Paste-able Python webhooks. So, I created one myself. Hope this is helpful to someone else 🙂

FB Chatbot Code Snippet on Gisthttps://gist.github.com/sshadmand/304a77371c9e207a5fa42a6b874017d5.js

TuneTime: This Game App Takes Music Trivia to the Next Level

Now that I’ve learned how to natively develop for iOS, I’m starting to have some fun with it! In this case I’ve built a piano based music trivia game.

appstore-button

How it Works:
Each team attempts to play a secret song on the provided keyboard (via a simple play-by-numbers music score). The player gets no indication towards the timing or rhythm of the song, just the notes. The team must figure out what the name of the song is before the 30 second timer runs out.

TuneTime-homescreen

game-screen-TuneTime

 

Updates/Feedback

  1. First time use of app user is very confused as to what to do next. Usually they click solo first, and skip over instructions.
    1. Potential Solutions: A intro screen and walk through of the game would be helpful. Though that could be skipped too. So offering an “easy” version of the game that grows in complexity over time may be more helpful. e.g. less keys, keys to play light up etc
    2. Note: Users wanted to keep the keyboard as the point of interaction.
  2. Even when the instruction are read there is a lot of confusion on how the workflow of the game works. This was expected as Jackie and I even got confused playing it ourselves. Just didn’t have ideas yet.
    1. Potential Solutions: One user used the game in a way that gave me an idea. Before I thought the lack of providing a rhythm would make the game fun, ergot I set it up so the player didn’t know the song name before playing (this add to a very complex workflow).
      This user wanted to know the song name they played ahead of time and seemed to have a lot more fun trying to communicate the song name through the keyboard, to the other players. This workflow would be MUCH easier to present and understand. I’m just not sure if it would be too easy. Maybe there are other ways to add complexity over time (per #1)
  3. People who have never played the piano have no idea what “#” means. Though I suspected it wouldn’t matter since all the keys are labeled, it was to much information to digest on a first time use.
    1. Potential Solutions: per #1. A “how to use the kayboard and music sheet” before presenting the keyboard would help. As well as lighting up the keyboard for first time game use.
  4. Keyboard was a bit too small
    1. Potential Solutions: Not sure how I can have many song with few keys. The original keyboard had bigger keys but couldnt get much out of it. This could again play into harder level, more songs and smaller keyboard.
  5. When the game got going people had some laughs and fun, so the potential is there, just needs a much smoother and well informed experience.

Key links to finally learning iOS development

If you haven’t picked up any iOS development skills yet, now is the time. It’s never been easier. Below are my reasons to finally take the plunge (successfully), followed by some helpful links to help you learn to create your first app too.

Contrary to popular belief, I’ve never coded up an iOS app myself. My excuse? For one, hiring great iOS developers gave me more time to focus on building great teams and products for my startups.  In addition, Objective-C has a unique syntax and requires a deeper understanding of handling memory, which demanded even more learning time. Finally, there was an immense level of complexity involved in testing, certifying and delivering native iOS apps to market. As a matter of fact, those higher than normal learning curves inspired many startups (including a few that I launched) to focus on making developing apps easier.

Since I already had a strong web development background, I always found it easier to build prototypes for my ideas using the latest web-based, app-building, technologies. Year-after-year a new product claimed to have “the right stuff” needed to create an iOS app that felt fully native, without needing to learn to code directly in Objective-C. Year-after-year I found those claims to be more wishful thinking than reality. Although quicker to develop, those technologies always left the final product feeling hacky, unresponsive or limited, and, in order to go full steam ahead with a project, a fully native version would be necessary.

Earlier this year I took another shot at using a new piece of web tech to build out a mobile app idea I had. This time I learned Polymer 1.0. I loved it as a web framework, but my hopes that Google had managed to finally develop an SPA framework that translated into a smooth functioning mobile app was, yet again, overly optimistic.

It isn’t really the technology’s fault though. The rendering mechanisms for HTML/Web (et al.) just weren’t made to process smooth app-like features. It renders top to bottom, grabs all its assets remotely, makes a lot of inferences, is based on standards that try and work across an array of products made by a variety of companies, and manages general security measures that must be spread across every site. In the web world, the browser is the ad-hoc gatekeeper, and its fighting to keep up. The mission of a browser is critically different to that of apps: to allow a user to serendipitously browse a large breadth of sites in a single view, all the while protecting the user from exposure to malicious pages that are inherently sprinkled into a user’s browsing session. Native apps are different. Both the user and the developer have a strong working agreement between what the developer would like you to see and how the user would like to see it. With that level of trust the developer is able to confidently create an experience specifically tailored to the goal of the app and the interest of the user; the OS can focus on greasing the wheels.

Sorry, I digress. Point is, yet again I was disappointed in what the web (and web wrappers) could offer, and, almost as a yearly tradition, I took a stab at learning how to develop directly in iOS again. This time, I’m glad I did!

Maybe it was due to all the free time I had while on our year long trip, but I doubt it; it came rather easily this time around. No, I think the main contributor to my smooth transition is that Apple has done a stellar job incrementally improving the life of an iOS developer over the years. I think the real turn was the release of Swift in 2014. The language is a natural leap from other common languages, as compared to its Objective-C counterpart. Also, there is no longer a heavy requirement to understand how to manage an app’s memory and delegations. The other power ally in creating ease for iOS developers is XCode’s more powerful yet simplified environment, along with interactive interfaces like Storyboards, segues,  IB Designables and more. In addition, now that TestFlight is fully integrated with iTunes Connect and Xcode, testing an app on a device, releasing it to external testers, and pushing it to the App Store is only a few clicks worth of effort; fairly brainless really.

All this added up to a surprisingly easily made V1 of my very first fully native iOS app! Yay! This will be fun 😀

Links to Learning iOS

Here are some key links I bookmarked while learning Swift in Xcode 9.0, including: vides, Q&As on StackOverflow, and tutorials. I strongly recommend learning the language by working toward implementing an idea you want to bring to life. Not only does it give you an inherent direction in what needs to be learned, but it also helps you push through the tough parts of learning that would otherwise spell defeat. The app I built used APIs, JSON, CoreData, Table Views (for listing data), Audio, and more. Hope this list helps!

 

UI Table View Controller

Prototyping a Custom Cell

http://www.ioscreator.com/tutorials/prototype-cells-tableview-tutorial-ios8-swift

View at Medium.com

http://stackoverflow.com/questions/25541786/custom-uitableviewcell-from-nib-in-swift

Adding Animated Effects to iOS App Using UIKit Dynamics

How to Create A Dribbble Client in Swift

https://grokswift.com/uitableview-updates/

Async Calls

Search Bar

http://shrikar.com/swift-ios-tutorial-uisearchbar-and-uisearchbardelegate/

Storyboards Navigation and Segues

http://stackoverflow.com/questions/26207846/pass-data-through-segue

http://www.raywenderlich.com/113394/storyboards-tutorial-in-ios-9-part-2

http://makeapppie.com/2014/09/15/swift-swift-programmatic-navigation-view-controllers-in-swift/

http://stackoverflow.com/questions/12561735/what-are-unwind-segues-for-and-how-do-you-use-them

http://sree.cc/uncategorized/creating-add-target-for-a-uibutton-object-programmatically-in-xcode-6-using-swift-language

http://stackoverflow.com/questions/25167458/changing-navigation-title-programmatically

http://stackoverflow.com/questions/29218345/multiple-segues-to-the-same-view-controllerhttp://stackoverflow.com/questions/24584364/how-to-create-an-alert-in-a-subview-class-in-swift

Reusable Xibs

Core Data

https://www.andrewcbancroft.com/2015/02/18/core-data-cheat-sheet-for-swift-ios-developers/#querying

http://stackoverflow.com/questions/28754959/swift-how-to-filter-in-core-data

http://jamesonquave.com/blog/developing-ios-apps-using-swift-part-3-best-practices/

http://stackoverflow.com/questions/1108076/where-does-the-iphone-simulator-store-its-data/3495426#3495426

Network and Observers

http://stackoverflow.com/questions/24049020/nsnotificationcenter-addobserver-in-swift

http://stackoverflow.com/questions/25398664/check-for-internet-connection-availability-in-swift

https://www.andrewcbancroft.com/2015/03/17/basics-of-pull-to-refresh-for-swift-developers/

http://www.jackrabbitmobile.com/design/ios-custom-pull-to-refresh-control/

http://stackoverflow.com/questions/24466907/passing-optional-callback-into-swift-function

Gestures

http://www.raywenderlich.com/77974/making-a-gesture-driven-to-do-list-app-like-clear-in-swift-part-1

http://useyourloaf.com/blog/creating-gesture-recognizers-with-interface-builder.html

Designables

http://iphonedev.tv/blog/2014/12/15/create-an-ibdesignable-uiview-subclass-with-code-from-an-xib-file-in-xcode-6

Page View Controller (Pages on swipe control)

 

I <3 Polymer 1.0

One of my more recent pet projects has been to create a web-based application using Polymer 1.0, a web framework Google released at their I/O conference this past Spring.

In short, I don’t think I can ever go back to developing on the web without it. Not only do I strongly suggest everyone give Polymer 1.0 a try, but I implore new developers to learn web development by implementing it, and current dev teams to incorporate it into their product lifecycle – at the very least during their rapid prototyping stages.

Why is that? Good question!

For one, it is the first time I’ve ever used a web framework where the resulting code base feels legitimate, complete, and inherently organized; not a mesh of scripts and views that the original developer will need to walk other devs through to ramp them up.

For new devs, the clean, class based, object-oriented structure will help mature their web development habits. Even as an engineer with over 15+ years of development experience, I felt like using the framework improved my habits.

For product teams, the scoped modularity of the elements allow their group to quickly re-work layouts and functionality – on an element-by-element basis. You can inherit core elements and layouts, and test them individually as you assemble the project. Designers can perfect a single element’s look and feel even before the structure of the application is built. It makes for an excellent segway between mockup and final product.

What makes Polymer so Different?

1: It uses web components, shadow dom, and pure HTML/CSS to render templates.

2: Each element you create is packaged individually and contains: a tag based HTML layer, a scoped CSS layer, a JS layer and an import framework.

The web  world is made up of hacks

The truth is most (if not all) HTML/JS frameworks are made up of what could be described as a series of “hacks” that attempt to create a consistent end-product across all web browsers (and versions of browsers) out there.  These hacks are necessary due to the slow pace to which web standards evolve, and exacerbated by the fragmentation created by the popularity, and propriety, of those browsers.

A Polymer Breakdown

Shims and Polyfills

Shims and polyfills are hacks that transparently help protect a developer from the need to implement legacy or cross browser functionality. As the name describes, they fill in all the compatibility holes browsers leave behind.

Shadow DOM

You actually interact with the Shadow DOM all the time on the web without realizing it. When you use an HTML tag such as <video>  you are requesting an element to be rendered by the browser. That element is composed of many subelements you can’t see in the inspector, ergot “shadow dom”. These subelements, such as the ones composing the video tag for example, manipulate and manage each frame of your video content. By creating your own custom elements utilizing the shadow DOM you are able to encapsulate entire chunks of your application’s functionality into a single tag.

WebComponents.org

Webcomponents.org has created a Polyfill library that allows users to take advantage of custom elements like the ones descrived described above. For example, a profile card you create can be shared and implemented as a single tag: <profile-card></profile-card>, by simply importing the “/profile-card.html” component.

Unlike other frameworks or libraries (such as Angular, Handlebars or JQuery) which work to manipulate and manage separately constructed HTML tags and CSS code, Polymer combines web components, polyfills, shims, CSS, HTML tags, two-way binding and the shadow dom into into a single package.

Scoped CSS

The Polymer/WebComponents structure solves certain small annoyances of web development, like having to keep track of all your CSS styles and hierarchies across your app. Every Polymer element scopes its CSS selectors to the element itself, thus, these selectors will not affect other CSS selectors outside of the custom element you create. In other words, you can use “.my-box” over and over to style different boxes based on their element context without affecting one another.

Some other useful features:

  • Drop-in documentation rendering system
  • Drop in testing frameworks

I could really go on and on about how smooth and organized it feels to develop something using Polymer, but it’s best for you to give it a shot yourself. Let me know what you think or if you have any questions.

Getting Started

Here is a look at a basic custom element setup:

fake-element_html_—_bitlang

If you are unsure of where to begin, start by using Polymer’s sample project (aka Polymer Starter Kit). It is a fully functioning app with a folder structure and gulp file built in. I original strayed away from the starter kit structure, but found myself ending up the same place as they did eventually. They did a good job with it, and it looks like they keep iterating on it.

Note: I should mention that there has been one annoyance I’ve had to deal with while learning Polymer: the lack of documentation and relating forums. The things that ARE available refer to Google’s originally releases Polymer 0.5 from a few years ago.  These posts are often unhelpful since so many nuances are different in 1.0. The good news is my new questions posted on Stackoverflow had responses within a matter of hours.

 

How to create fast motion videos on your iPhone for family vacation updates

On our trips to locations around the world our family and friends want a way to get an idea for what we are up to.  Like most people, we post pictures to Facebook that try and capture the essence of our trip but video is so much better at truly capturing the 3-dimensional realities of what we experience.

Now, with tools like Hyperlapse and iMovie on iOS, you can create a video that summarize an entire site in a timely way for both the creator and viewer.

Here is an example of a video of our trip to Cappadocia I created entirely on my iPhone:

Here’s how I did it

  1. Download Hyperlapse by Instagram on your iPhone
    1. Not only does hyperlapse allow you to capture a sped up versions of your video, but it adds a layer of stabilization so to reduces camera shake.486943823_640

      hyperlapse
      Hyperlapse’s home page, recording and saving screens
  2. Use Hyperlapse to shoot some video.
    1. Even though there is built-in stabilization, it behooves you to try and keep the camera as steady as possible.
    2. I often save my video at “2x.” Half the size (in time and memory) as a regular video and, as you will see when we edit in iMovie, you get a wider range of fast-forward-play options.
    3. Once you finalize the video it is saved to your photo library for later use.
  3. Download iMovie on your iPhone

    at-the-core-imovie-hero_1
    iMovie app in edit mode
  4. Follow the instruction to start a new movie or trailer, and select “movie”
  5. Choose a theme (I usually just choose simple) and select “create”
  6. Follow the instruction to add “video, photos, or audio”
  7. Select one of your Hyperlapse videos from your library
    1. Tip: Pressing play will allow you to preview the video before adding it. The arrow pointing down will import it into your project.
  8. Drag and drop your movie clips in the order you want them to play
    1. Tip: Taping a clip once selects it for editing. If there is a yellow border on the clip, you are in edit mode. If you want to move the clip, tap outside the clip so it is no longer highlighted and then tap-and-hold the clip until it is draggable.
  9. Add transitions between the clip by tapping the small square box in between each clip.IMG_9912
    1. Tip: If a clip is too short the transition options will be grayed out. You must have at least enough time in a clip to allow a transition to complete in order to select it.
    2. Tip: Some transition have multiple modes. After choosing a transition by tapping it, tap the transition again to get the different variant. Eg, fade to black or fade to white.
    3. Tip: This is one of the places choosing a theme in the “create project” options will have an outcome. See the “theme” transition. That will change based on the theme you chose. Tap the gear icon in the bottom right of the application to change the theme after a project is created.
  10. Edit the the duration of a clip
    1. Once a clip is selected, and highlighted with the yellow border, you can drag the ends of the clip to shorten or elongate the duration of the clip.
  11. Speed up some “in between” clipsIMG_9914
    1. Some clips will still run a bit slow due to things like how long it took you to walk to the end of a block or to pan 360 degrees. You can speed up segments of these clips to move the video along.
    2. Tap the clip to go into edit mode.
    3. choose the meter icon (directly to the right of the scissor icon.) You will then see a meter labeled 1X
    4. Drag the knob on the meter to the right to speed up the clip. You can move it to a max of 2X (which is why saving the clip as 2X allows you a range of 2X to 4X which.) There are ways around it I will go into later.
    5. If you only want to speed up a segment slice the clip into more segments (explained below) and speed them up without transitions at their ends.

The functionality of iMovie is limited. Most of the effects you will create work off of the duration of each clip in your project. Therefor, you can manipulate your effects by slicing your clips to suit your needs.

How to slice a clip

IMG_9913

  1. Scrub (meaning, slide the white line A.K.A the video head) over the moment in the clip you would like to split into two.
  2. Select a clip for editing (make sure the scissor tool is highlighted.)
  3. Choose “split”

Now you have two clips for the same scene. As long as there is no transition there will be no visual result on the video due to the “split” you just made. Like I mentioned before, you are merely using the split to tell the effects we are about to add when to start and end. Eg, the titles and captions.

Adding a Caption or Title

  1. Select a clip for editing
  2. Select the large “T” (third icon to the right from the scissor.)
  3. Select a caption type
    1. In order to edit the text for a caption or title you will need to tap the video player, above the film section of the application.
    2. Tip: After choosing a theme, extra options will display above the edit tray such as “Center”, “Opening” etc. These will position some titles, as well as change the format for others. Play around with them all to get a feel for the options you have.

By now you should have a video. To get a smooth video will take practice but now you will have all the tools and tips to do so 🙂

To save the clip as a video you can post to Facebook, go to the movie listing (if you are editing a movie project now you will need to tap the back arrow at the top of the application.) There you will have options to save the film to your library.

Tip: If you want to speed things up or make more advanced transitions you can save the edited video to your library and then create a new project with that saved video. You will than be able to speed segments up by another 2X or add transition to clips that may have been too short in your original movie.

Before we go, here’s a bonus tip …

How to rotate movies

I originally stumbled onto using iMovie when I accidently recorded a video vertically and needed to rotate it. Here’s how to rotate movies:

  1. Open a movie in iMovie (if you do not know how to do so read the tutorial above.)
  2. Pinch the movie preview viewer (the area above the clips and play head line) with two fingers and rotate them (like screwing off the top of a bottle.)
    1. You will then see an circle arrow appear on the video. Once you see that remove your fingers from the screen.

IMG_9915

 

Here is a quick video of some of the features in practice, as described above.


Enjoy!

How to make free calls home from around the world

Wouldn’t it be nice to make free calls to your home country from anywhere in the world? How great would it be if friends and family at home could call you for free while you travel? Sure you can use Skype or Viber to make internet calls, but with them everyone needs to use the same service; it won’t work well when calling a business or landline. With the method below you can call any phone number directly, be it a home phone, cell phone or app. To do it all you need is a Google Account, a phone number with your local “home” area code (only initially,) and a computer with an Internet connection.

Here’s how to do it:

  1. Sign up for a Google Voice number in your home country before you leave.
  2. Google will provide you a new local number called your “Google Voice Number.”
  3. “Link” your GVoice number to an existing landline or cell number to complete the registration. Note: You can only have one GVoice number for every landline or cell phone you have.

 Your new GVoice number will charge you for “international calls” made to area codes outside your designated GVoice’s area code, BUT it will consider any call to the same GVoice area code a “free call” – no matter where in the world you call from! See screenshots and captions below. 

In addition to the free calls, you will have voicemail that includes a free automatic transcription service, allowing you to read your voicemail messages. You will also have the ability to send and receive texts. Another great option is to use the Hangouts app. Using it you can make internet based calls to other Hangout user AND direct to local phone numbers from your phone.

For travelers this feature gives you an amazing way to stay connected to family and friends at home while using a local number they can call for free as well!

Like to travel? Yup. There’s a gene for that.

14381860924_p0_v2_s260x420Every time you see a story like this you can’t help but think about Ethan Hawk in Gattaca. Our lives, actions and – self – broken down into a perfectly predictable set of genes we can architect for birth.

Elite Daily recently reported the discovery of a gene identified as DRD4-7R ,dubbed the “wanderlust gene”, that gets us yet another step closer.

You can read more about the findings of the Genetic Basis to a Globetrotting Fanatic here. It explains how the gene is carried by an approximately 20% of the human population and is linked to restlessness and curiosity.

Here’s a fun question, if we ever were able to gain complete control of our genetic make-up would you choose to have the Travel Gene?

wanderlust-large-msg-132647107444