Technology – Page 2 – Sean Shadmand

Keeping Bad Passwords Out with BreechLists

Troy Hunt did a great write up on the subject. You can check it our here.

In short, there are millions of bad or compromised passwords added to the Breech List. To safely ensure your user’s password is on that list:

Create a SHA1 version of the password on the client/browser/JS
Take the first 5 chars of that SHA1
Check those characters against the Breeched DB `https://api.pwnedpasswords.com/range/[SHA1 5 char range]`
That API return hundreds of close SHA1 matches
Then check last list against the remaining 5+ characters
If it exists, it is probably a bad password
Tip: You can use the hit count to determine just how bad it is

Here is a Javascript (ES6) implementation using `sha1` and `axios`:

Firebase is 🔥

I’ve had the pleasure to watch the Firebase product grow from an idea our office buddies had as a startup, into a formidable product, and then to a suite of products at Google. I’ve been really impressed with what the founders have done. Hats off to them.

This is not a fluff piece for a friend though. To be honest, and for whatever reason, I never really used the platform until about a year ago; just didn’t have a need.

That has all changed, and, today, I see firebase as more than just a cool product, but one that I truly love and have received tremendous value from. Here is how I got there and why I feel that way.

Remember Parse? Facebook acquired the DB as a service in April 2013, and shut them down in Jan 2017. If I remember correctly, Firebase served as Google’s way to address that chasm and provide a novel, cloud-based, data platform that was especially friendly to mobile developers.

A lot has changed since, on the Firebase platform. Their systems is more than just a websocket based, real-time, hash database. It is a veneer to the plethora of services that sit locked away in Google’s not-so-friendly-to-use ecosystem.

It was very unlikely that I move from what I know in AWS, to what I do not know, and can not easily navigate, Google Cloud Platform. My initial need for a database that handled live-reloads on data update, grew into me using their storage, auth, hosting, serverless/functions, and logging services. In fact, it didn’t hit me that they were just tapping into GCP until I had to edit some auth/keys in the system; that’s just how seamless it is.

Out of curiosity, I tried to copy the same functionality of my Firebase system by setting up a GCP-only clone. It was a crappy experience! One I would never have taken the time to ramp up on otherwise.

With firebase, if you want storage, boom you got it. Want to right some serverless functions, easy. Checkout logs and crash analytics, yup you’re covered. Create a key to allow access to your system? No problem. In just a few click or a few lines of code, you can get up and running easily, and have the power of Google (without the admin overhead) behind you.

When it comes to filler features to help keep moving quickly, Firebase is there for you. Whether it is a beautiful auth flow (without a bias to only using Google auth), an invite system, or “who is logged in now”, Firebase does not say “that is not core – go some place else or build it yourself”. I have found myself coming back to them, even when a live-db is not a requirement for the ease in implementing those filler features alone.

If there was a critique, it would be that their use of storage for video is not top notch. They lag behind AWS for their ability to pull content seamlessly. Not much else.

GitLab and My Transition from GitHub

I was a heavy Github user. That is to say, I used them exclusively for my code projects. For a long time, there was no question in my mind of who to give my projects to. Even when Gitlab entered the market, my first thought was, these guys are just copying GH, why would I convert? Not to mention, hearing the rumors that the CEO is was a jerk didn’t entice me to rush to adopt.

A few crucial moments, and Gitlab releases, changed that way of thinking within a year.

The Conversion

Initially, it was sheer curiosity that got me clicking around on their product. That and the very low barrier to entertain that curiosity.

I had reached my “private repo” limit on Github, and of my private repos few were businesses and mostly projects that I experimented ideas with and/or coded up prototypes. So, I had reached that limit right when I had another idea I wanted to flesh out, and upgrading for a cost didn’t seem worth it. Out of curiosity, I went to GitLab and logged in.

As the name implies, GitLab did not shy away from their copy-cat beginnings as a GH clone. Because of that, I was able to login using GH credentials and import all my private repos for free. The conversions was instant and easy, and my access to an unlimited store of private repos sure did help. The copy-cat look and feel played to my advantage since there was no ramp-up required. What was different about the site were things I hated about GH. Like the wording on PRs (“MRs” in GitLab), or how I could create new files from within the UI.

All in all, an unexpectedly pleasurable experience.

Top of the Hill

My first experience was my gateway drug. Each new idea/project I started, I started in GitLab. It wasn’t too long after that I used them almost exclusively. Gradually, feature after feature, GitLab took that initial win with me and solidified it with feature I really loved having all in once place, like CI and CD.

Successful startups typically take one of two approaches: innovating on one thing and the rest is copy and paste, or, finding innovation as a combination of many non-innovations and putting them together in a beautiful way. For example, the first utensil was not a spork, and sliced bread did nothing more than combine bread and a knife in a novel, simple, and less expensive way.

GitLab is like sliced bread in that, they took a few things I already used (docker, git, CI/CD), and combined them seemlesless, and cost effectively, as their innovation.

I can very easily go from a concept-project, into a full blown production sized deployment suite in a matter of minutes. In its most basic form, GitLab is very easy to use and can be entirely free.

What keeps me happy is that they keep pumping useful improvements out; and I emphasize useful. It is not getting cluttered with features that get in the way, or as a way to prove they are hard at work. Rather, they seem to have a pulse on the dev community.

Where are they Still Losing?

One thing that has yet to change is the stronghold GitHub has on the community driven aspects of development. Their attention to open-source, from links to NPM package repos, to issues for projects, all keep me returning to GH on my google searches.

Will GitLab take that on next? We will have to wait and see!

Touch Sensitive Button Using Conductive Fabric and Velostat

For this experiment I decided to dive deeper into the EE side of things and wanted to get a feel (pun sort of not intended) for how it all worked. My goal was to figure out how to create a pressure sensitive button made out of fabrics, and hook it into an Arduino so I could program around the haptic feedback.

I thought it would be easy to find the parts and videos I needed to get to my goal, but was surprised to find few videos that took the viewer from start to finish. So, I decided to record what I learned along the way so that others may have it easier.

First, let’s start with the materials:

Velostat
Conductive Fabric
2x Alligators Clips
Multimeter

In short, Velostat is a resistive material and feels like it is cut out of a trash bag. The conductive fabric is a fabric that has conductive material woven into each strand. If you hook up each piece of fabric to a battery and touch those pieces of fabric together you will create a complete circuit. (Be careful, this can cause a fire when the wires spark around the fabric.)

When you place the Velostat between those two pieces of fabric you make it harder for the electricity to flow from one piece of fabric to the next (ergot “resistor”). Since the Velostat is thin and malleable, pressure from your finger onto the sandwiched materials increases or decreases the flow of electricity. This change in electricity is the signal you will interpret in your “pressure gauge”.

This video shows you how you put it all together. If you remember the principles above the rest becomes fairly easy. For example, you must be sure that none of your conductive fabric touches one another, so make sure your Velostat swatch is larger than you fabric swatches.

Now that I got that working I set out to connect the system to an Arduino so I could read the change in resistance on the computer.

Materials:

Same materials in Part 1 (Multimeter not required)
1N4003 Diode
Arduino UNO
Jumper Cables
Arduino SDK
Computer
USB/Serial Port Connector

	#include <math.h>

	int myPin = 0;
	int touching = false;
	int touchingCount = 0;

	void setup() {
	Serial.begin(9600);
	}

	// the loop function runs over and over again forever
	void loop() {
	int sensorValue = analogRead(myPin);
	String amount = "Start Touch";

	if (sensorValue > 90) {
	touching = true;
	touchingCount++;
	} else {
	touching = false;
	touchingCount = 0;
	}

	if (touching && touchingCount < 20) {
	amount = "Tap";
	} else if (touching) {
	amount = "Hold";
	}

	if (sensorValue < 90) {
	// Serial.println("Not touched");
	} else if (sensorValue < 120) {
	Serial.println("Light " + amount);
	} else if (sensorValue < 160) {
	Serial.println("Strong " + amount);
	} else if (sensorValue < 190) {
	Serial.println("Hard " + amount);
	}

	}

view raw Advanced Reads hosted with ❤ by GitHub

	#include <math.h>

	int myPin = 0;

	void setup() {
	Serial.begin(9600);
	}

	// the loop function runs over and over again forever
	void loop() {
	int sensorValue = analogRead(myPin);
	Serial.println(sensorValue);
	}

view raw Basic hosted with ❤ by GitHub

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

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

Making the Switch

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

#> npm install -g yarn

#> yarn

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

The real question is – why are you?

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

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

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

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

Enter GoGong.

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

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

In short, GoGong provides:

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

Hope you find it useful!

Docker for Dummies

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

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

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

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

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

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

#> docker ps
#> docker ps -a

and images…

#> docker images

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

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

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

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

#> docker ps

(Shows all running containers.)

#> docker ps -a

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

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

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

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

An example of running a container in detached mode:

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

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

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

#> docker stop [conatiner id]

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

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

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

FROM ubuntu:latest

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

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

To create our custom image based on that Dockerfile:

#> docker build -t my-image .

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

Now you can run …

#> docker images

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

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

For example:

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

UPDATE: Applying a Web Server

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

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

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

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

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

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

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

EXPOSE 8000

And then in your run command use:

#> docker run -it -p 8000:8000

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

#> ./manage.py runserver 0.0.0.0:8000

UPDATE: Mounting Docker to Host to edit Container using IDE

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

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

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

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

New FB Messenger Bot Port to Python Based on Quickstart Guide

FB Messenger Python Port on StackOverflow

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

FB Chatbot Code Snippet on Gist https://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.

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.

Updates/Feedback

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.
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)
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.
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.
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!