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

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

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!

Mountain Louging – Living Facebook

Almost a year ago I saw a post on Facebook of some guys having a blast louging down a mountain. No one knew where it came from on the thread, but I remember thinking, “Man – I gotta try that.” Most of the time the things I’ve see of Facebook stay things I’ve only seen on Facebook. Well no longer. In New Zealand we stumbled upon Skyline Park in Rotorua. When I saw they had luging I insisted to Jackie that we HAD to go.

When we got there they told us we could only buy packs of at least 5 luge rides with a zip line. We thought that was overdoing it, but without any smaller options we paid the $70pp and went inside.

Good thing we did too! After our first ride down we ran back to the top to do it again, and again, and again… I am usually not the type to go to an amusement park on a vacation while touring a country, but the Kiwis do it in such a unique and outdoorsy way that it is well worth it. The park had awesome Mountain Bike trails and the Zorb, which we didn’t get to try because of time. What a great way to enjoy the New Zealand outdoors and views!

Here is a video of one of the last trips down. By then I got more confident and really let it rip. I even got some air on a couple of the dips – you can hear me hooting when it happens 🙂

Some other non-luge clips:

Here is Jackie before we took our zip line down. I would have had video but since you end up laying back for the ride the whole shot was of the sky :-/

 

Getting ready to zipline
Getting ready to zipline

The more speedy way to come down after the zipline. We fell backwards with a quick bungee. It happened so fast I forgot to film it. :-/

A quick bungee down.
A quick bungee down.

One of our many rides back to the top on the Gondola for more fun rides.

Taking the Gondola back up for another fun ride
Taking the Gondola back up for another fun ride

How we turned our 750 sq ft apartment into two 50L backpacks

“Here we go – one month left until move-out day!” With our plane tickets bought, it just got real.

We posted to Facebook, Craigslist and taped signs on the street, “EVERYTHING MUST GO!” If you we’re looking to fill your apartment with more stuff, Sean and Jackie’s house was the place to be.

IMG_7826
Price check on aisle 1

Why were we getting rid of everything? Well, this wasn’t like any other move-out day because it wasn’t really a move at all. We were going “nomad” for a year and for the first time in our moving history we were NOT figuring out how to relocate our stuff into another set of rooms and closets. It sounds like a subtle difference, letting all the things you’ve accumulated over the years go versus “go somewhere” but the feelings were monumentally different.

IMG_7816
our soon to be filled backpacks

Our goal was to take everything we needed (and I emphasize *needed*) and make it all fit into each of our 50 Liter backpacks. So, goodbye couches, tables, blenders, utensils, and plates. Goodbye to our multitude of change-of-clothes options, Jackie’s coveted hairdryer, and, most notably, our current concept of home.

We’ve been planning this for years, well, at least talking about it for that long. You know the conversation, right? “Hey babe, what if we just dropped everything and just – went? Just you and I. Somewhere far away. Wouldn’t that be great?!”

Bowls of too hot, too cold and just right porridge.

The conversation would usually end with either an imaginative tour of all the top places we’d want to see or end with a comment like, “we have too much going on right now to leave.” Just like a modern day Goldie Locks it never feels like the right time to make it happen. The economy is always going too well or too poorly – when is the timing just right?

“Okay”, Jackie said, this time changing the typical end-game phrase, “If we did this what would it look like?” We talked about going to South America and making our way down to Patagonia. Maybe visit family in DC and then start in Europe? We could make the dollar stretch if we went to the South Pacific, right? How long would we go? Three months? Six? Sadly, the more time we gave ourselves to travel the more things we were able to do and thus – out of time again. In the same way our bag size grew and filled, it never felt like there was – enough. We were living Parkinson’s Law.

I won’t bore you with the play-by-play, but trust me in that researching locations, costs, transit systems and weather had us going back and forth between destinations, routes and timings ad nauseam.

But, now with our plane tickets bought there was no longer an ever widening gap between theory and reality. Our first stop is Fiji and we have 30 days to jettison what we didn’t need, pack what we do, and go.

Next up, making it happen economically!

IMG_7883
Jen C. and Jeff came by to lend a hand and take some stuff
IMG_7898
My view from the backseat of Jeff’s wagon after shoving our couch in it to quickly get it to his apartment on our last day in SF

 

 

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";
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=" + 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

Todays Tech: Editorial

Being part of the industrial revolution must have been amazing. I use to wish I was around during a revolution of that size as I would have wanted to take risks and catch the business wave as early as I could.  Like being around when Bill Gates started MicroSoft. How could people have thought it was a fad, or rejected such an practical, obvious, beneficial product? Computers and software changed the way life happens and a majority of the population were/are late adopters. These last few years have been the beginning of yet another great revolution in my eyes and I wasn’t going to pas it up.  I cant believe how many thought/think the technologies of today are a fad, many of those nah sayers who argued in my and coworkers face and mocked the industries goals are forgotten (lucky for them) and from only 1 year ago! More and more are getting on the ride. Im glad I started giving it my all early on, no regrets.

We still have a long way to go. Those who said Facebook was a fad are now on FaceBook with the rest of their family and friends and use it fairly often. What’s more disturbing is how often I over hear people on FaceBook or in passing that scream how much Twitter is a useless fad……I guess we just need to give them a few years in which I suspect that they will be bashing yet another new technology, but will do it using Twitter.

Even the most basic and useful forums of social media get bashed to this day, often purely for cultural reasons in which technology in many peoples eyes equal sub par information and practicality. I don’t know how many times I’ve over heard intelligent people bashing any information found on Wikipedia. Although not perfect it’s easy to for get that Webster and Britannica were all originally missions of one man traveling the globe. One man one perspective asking strangers and alike what they knew to be knowledge of the earth and its inhabitants. Accuracy is subjective and in this case a multitude of subjective persons might be more powerful and “true” then a single man is the final say.

Let’s try harder to find use in things that catch on or connect us all, that increase our perspective across greater bounds whether it be 100% accurate or not. If we are brought together and information is shared more readily then we are only following a path set thousands of years before us first with smoke signals, then to written stone, bibles, printed news, telegraphs and phones, radio and TV, internet and social media. Let us allow ourselves to find the good, as we have so reluctant at each point of our past, in connecting with one another and decipher the positive gains in mediums that do just that.

Tech Alert: FaceBook Ads

Facebook
Facebook

“Facebook occasionally pairs advertisements with relevant social actions from a user’s friends to create Facebook Ads. Facebook Ads make advertisements more interesting and more tailored to you and your friends. These respect all privacy rules. You may opt out of appearing in your friends’ Facebook Ads below.
Appearance in Facebook Ads”

To find the settings and change what FaceBook and advertisers can do follow the instructions below:

Click on SETTINGS up at the top where you see the log out link. Select PRIVACY. Then select NEWS FEEDS AND WALL. Next select the tab that reads FACE BOOK ADS. There is a drop down box, select NO ONE. Then SAVE your changes. (REPOST and let your friends know).

Twitter, Facebook, and Blogging – oh my!

Here is a simple breakdown of some popular communication-based internet technologies, in plain English. Hopefully, it will help give readers a better understanding of the basic abilities, purposes, and differences these tools provide.

For each technology, I attached an “In Plain English” video to help explain the usage of the technology. In Plain English became popular in 2008 for their extremely basic no frills explanation of – things. So click on the link for each technology to get a quick breakdown.

Blogger.com

Blogs:

Facebook

Facebook and social networking

 

Twitter

Twitter

 

twitter.com

 

RSS

RSS and XML