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

imgres-5Wouldn’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. 

Google_Voice_-_Inbox__6_ 2
After registering you must verify your new number is connected to a real non-google number.

Google_Voice_-_Inbox__6_
Using the voice.google.com (or hangouts) you can make or receive calls or text to your GVoice number.

Google__Hangouts
All calls made with the same area code as your GVoice number will be free – no matter where you call from!

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

 

Facebook JS login on Chrome iOS workaround

I was putting together a Facebook JS SDK based login on a site I’m working on – only to find that Chrome on iOS does not support the action.

JH8Un

 

What was even more surprising was the lack of documentation or support online (with Chrome or Facebook) to help work around the issue.

I saw a few suggestion that had solutions based on using Parse or where others suggested using a backend based login API. I didn’t want to install another framework just to solve this problem, and my objective for the interface was to offer a seamless login process that doesn’t interrupt the user’s current modal based workflow.

To make matters worst, and I am really disappointed in Google for this (which is rare,) popping out windows on Google Chrome iOS makes a null reference to the  “opener” in certain situations. This makes it hard to complete a seamless login between two windows once the FB auth page is verified.

Below is a solution that checks if FB is authed, if not, manually opens an FB auth window that forwards the user to an Opener Handler page. That page forces a refresh of the openers auth tokens and closes the window. Once completed the user is sent back to the original page (with no page refresh) and can now proceed with a validated FB auth.


var ABSOLUTE_URI = "http://yourpage.com/openerhandler.html&quot;;
var FB_ID = "123456778";
function openFBLoginDialogManually(){
// Open your auth window containing FB auth page
// with forward URL to your Opened Window handler page (below)
var redirect_uri = "&redirect_uri=" + ABSOLUTE_URI + "fbjscomplete";
var scope = "&scope=public_profile,email,user_friends";
var url = "https://www.facebook.com/dialog/oauth?client_id=&quot; + FB_ID + redirect_uri + scope;
// notice the lack of other param in window.open
// for some reason the opener is set to null
// and the opened window can NOT reference it
// if params are passed. #Chrome iOS Bug
window.open(url);
}
function fbCompleteLogin(){
FB.getLoginStatus(function(response) {
// Calling this with the extra setting "true" forces
// a non-cached request and updates the FB cache.
// Since the auth login elsewhere validated the user
// this update will now asyncronously mark the user as authed
}, true);
}
function requireLogin(callback){
FB.getLoginStatus(function(response) {
if (response.status != "connected"){
showLogin();
}else{
checkAuth(response.authResponse.accessToken, response.authResponse.userID, function(success){
// Check FB tokens against your API to make sure user is valid
});
}
});
}

view raw

FB JS Auth

hosted with ❤ by GitHub


<html>
<head>
<script type="text/javascript">
function handleAuth(){
// once the window is open
window.opener.fbCompleteLogin();
window.close();
}
</script>
<body onload="handleAuth();">
<p>. . . </p>
</body>
</head>
</html>

view raw

Opened Window

hosted with ❤ by GitHub

Built-in Dictation on Yosemite

What I dictated – as is and untouched:

It’s been a while since I had tried using dictation mostly because it’s never worked before I don’t know how long maps habitation on it but I figured I’d give it a shot again this blog is written completely has dictation with no edits made to see how good it aside for my poor dictation skills hopefully the words being written are exactly as I intended blow is [the dictation ended automaically maybe becasue my pause or just to many words – starting over] A link showing you how you can set up dictation on your computer. I just noticed that all the dictation coming before this punctuation so I must have to say the punctuation out loud, which is expected.

http://support.apple.com/en-us/HT5449

What I actually said – uncorrected:

It’s been a while since I have tried using dictation. Mostly because it’s never worked well before. I don’t know how long mac has had it, but I figured I’d give it a shot again. This blog is written completely as a dictation with no edits made to see how good it is. Aside for my poor dictation skills, hopefully, the words being written are exactly as I intended. Below is […] A link showing you how you can set up dictation on your computer. I just noticed that all the dictation coming before this had no punctuation – so, I must have to say the punctuation out loud, which is expected.

http://support.apple.com/en-us/HT5449

Screen Shot 2015-02-23 at 11.28.10 PM

To set up dictation go to your preferences and choose “Dictation and speech.”

HT5449-yosemite-system_preference-dictation-001-en

 

Turn dictation on and you’re all set. Press Fn key twice to start.

Annnnnnnd end scene…

Overall it’s not too shabby of an implementation considering it used to cost hundreds of dollars to get dictation software on your computer. Also, it helps that the dictation bar has always been set fairly low. To be fair, trying to make up something while dictating is a bit unnatural – so I can see why the feature would stumble through a sentence; I sure did. A nice feature is that dictation works in any website or app on your mac – all you have to do is press the function key twice and start talking 🙂

You can also go the extra mile and set up text commands. This feature is not new, and I have never found myself able to speak my commands more quickly than I could keyboard them – so I will leave that decision up to you. You can read more about voice commands herehttp://www.macworld.com/article/2834532/ok-mac-using-automators-dictation-commands-new-in-yosemite.html