Thomas Johnston – Developer for the People

Meet Thomas, our Sr. Front End Developer and favorite Oregonian by far. Thomas is a powerhouse at Animal Labs; he’s never too busy to lend a hand and always keen to add to his library of skills. We chatted with him to learn more about the types of projects he enjoys and share some insight into what it would be like working with him.

Q: What has been your favorite project so far with Animal Labs?

A: That would be our work with an emerging Fintech company last year because it allowed me to go beyond the original technical requirements of the job and actually implement a strategic solution to a long standing problem. It started out as a simple front end project: updating and adding features to their existing mobile app but pretty quickly it became apparent that they needed a Development communications overhaul. Their teams weren’t communicating effectively cross-departmentally and it was creating serious errors in their test builds and live deployments.

They had an external vendor in-flight on API development and internal IT didn’t even know they were working on it. This had been a longstanding for their IT team and once we identified the root source of the issue, we evolved into not only delivering the original scope of our work but also managing that 3rd party development agency’s deliverables as well.

Even though the scope and constraints changed, we were still able to deliver original project within the original timeline. That’s what I like about working with Animal Labs – we’re able to adapt to the evolving needs of our clients and expand our scope easily to deliver as much impact as possible.

Q: What was the original front end development scope and how did it evolve?

A: The original project involved creating a native mobile app using React Native and SQL, that had full offline capabilities and could provide portfolio overviews and stock options for investment.
That evolved into including managing the API deliverables from the 3rd party that were written in Python for AWS.

Q: How long did that evolved mobile app & API development project take?

A: In total the project took 280 hours. One of our SF employees came up to the Portland office and we worked together in a Pair Programming model. Pair Programming means one person is essentially “driving” the development with hands on keyboard, while the other person is “navigating” (keeping track of the north star and managing peripheral requirements). I really enjoy working directly with others so in-person co-working aspect was another highlight for me.

Q: Why did you decide to become a front end developer?

A: I love coding! I love it because what you’re writing actually means and creates something for the people around you. I’m not ‘antisocial developer’ stereotype. I care a lot about working directly with and improving the experience of those around me through my work.

Q: Why have you chosen to work in consulting?

A: Because it allows you to transcend corporate hierarchies and engage people at the level necessary to implement broad reaching change. It can be hard to lead change transformation from within. I enjoy that each new project brings with it new challenges and allows me to translate high level business objectives into realistic technical requirements.

Q: What are your primary strengths as a front end developer?

A: Javascript is my top language but I like to consider myself more of a generalist. I enjoy learning new languages and platforms and spend most of my free time putting these new skills to practice on pet projects.For example, I enjoy building computers and video game simulations with proprietary scripting languages.

Something I believe in strong is self documenting all my work for clients. I take pride in ensuring that I leave behind code that anyone can understand. Code should be written for humans, not computers.

Q: What would be your dream project?

A: Obviously, I’d like to work on a video game or anything that enabled me to be as creative as possible. Beyond that, I get excited about anything that is collaborative. I really enjoy working on multi-stakeholder projects where multiple viewpoints and skillsets are included.

Ben Fagin – He builds it, he crunches it!

Get To Know Us / By Shawnee Canjura

Ben is a founding member of Animal Labs and our resident DevOps Jedi Master.
We sat down to learn how his experience shaped his career path and
crafted the unique skillset he brings to the team.

Q: Over the course of your 10+ year career, what has been your favorite DevOps project and why?

A: The most complex task I ever took on required increasing my client’s processing time by 8,400% I know that sounds absurd but cloud technology was still very new at the time and what we were aiming to accomplish was revolutionary for the client.

The project was for a leading GPS corporation. They needed to speed their map processing time from 1+ month to just a few hours. Part of this involved an enterprise scale cloud migration. In this case we were migrating to AWS and a big part of the project involved up-skilling their internal team.

Overall, the project took 2 years and involved networking over 2,000 computers and multiple data centers around the world so that they could move up to 800 terabytes of map data at a time.

To put that in context: whereas before it took them 1+ week to process the data for the city of Berlin, now it only took 2 hours. It was an incredible result and I’m proud to have been part of it. This experience is a big part of why I decided to start my own DevOps consulting firm. I enjoyed being a change leader and working with cutting edge solutions to help my client achieve groundbreaking results.

Q: What’s involved in such a transformative project? What difficulties did you have to solve for?

A: Well, I had to turn a non-distributed system into a distributed one. They started out with an onsite database that stored global road network data that was on an annual push. They needed me to transform that into a cloud-based data center that was capable of continuous delivery. In order to do that, I needed to accommodate for distance between computers, manage database migration and relocation, manage the computer processing connections, train their internal team on these changes… these projects when done properly are usually a huge undertaking.

Imagine: how do you prevent thousands of computers from downing the network entirely? You have to build in failure resiliency and network durability, plan solutions for data sovereignty issues, ensure everything is modularly upgradable, solve throughput flow problems, build out database divisions… it’s like pulling all the pieces of a super computer apart and stretching the, around the world and then finding a way to glue them together so that all the data continues to flow properly.

Q: What is your recommended infrastructure platform? Do you always work with Amazon Web Services (AWS)?

A: AWS is great and I work with it a lot but it’s not the right choice for every company out there. Google Cloud Platform (GCP) and Microsoft Azure are obviously top contenders in the space but there are many other solutions out there as well and it really depends entirely on the company, their parameters and goals.

When my clients need help migrating to the cloud the most important part of my job is usually simply helping them pick the right vendor. Many consultants pick the ones they have partnerships with and know best – that’s not how I work. I work with my client to identify their unique business requirements and advise what’s best for them – not me. I am not a reseller and I make it a point to know the entire landscape well.

Q: What’s your ‘dream project’?

A: I’ve really been wanting to get involved in another cloud-based, greenfield project. I want to be able to leverage all the latest and greatest solutions out there. So, for example, a project involving enablement of IoT is likely to require this.

Q: And when you’re not pulling super computers apart? What are some of the ways you like unwind?

A: I’ve really gotten into welding lately! I guess my form of relaxation still involves building structures. One of my favorite bands is the Miles Davis Ensemble. I like to just listen to their music and start creating.

Art of the Interface: Improving Human Connection

Get To Know Us / By Shawnee Canjura

Josh is a real people-person. He didn’t intend to become a full stack developer. He was a music major at UC Santa Cruz and got terribly side-tracked by a project in his electronic music class. He wanted to go beyond compositions and create an immersive experience so he decided to integrate complicated visuals synced perfectly with his music. With no experience to speak of, he then wrote predictive software that integrated with his lighting and video systems so that the visuals would anticipate and then change in accordance with the rhythm and chord phrasing. He was hooked.

So, while the world may have been robbed of DJ Josh, we now have CEO Josh, Co-Founder and Sr. Full Stack Engineer of Animal Labs. He still likes to work at the intersection of hardware, software and humanity. Some call that UX but for him it’s more than that – it’s about UX that captures a feeling and helps humans connect better with one another. It’s this Human-Centered Design approach that led him to start his own company. He wanted to create a space where top-class engineers are personally invested in their work and proud of what they deliver: user-friendly solutions that are designed for maximum impact and scalability.

In his role as Lead Engineer at Animal Labs, Josh does this by leading cross-departmental communication. He helps his clients identify their root technology issues and understand the technology and the team that would be required to provide the right solution. He works with stakeholders across all levels of the organization, translating technical requirements into functional solutions and program deliverables, ensuring that the ultimate product is shipped on-time, at-cost and is built to scale. He is fluent in many programming languages but his favorites are currently Javascript and Typescript in React and Node.js.

Before founding Animal Labs, Josh designed and built interactive tech installations for red carpet events in Hollywood like the Grammy and Oscars. His clients included tech savvy, heavy hitters like Instagram, Twitter and Salesforce. This grueling environment is where Josh honed his ability to find creative solutions while under pressure – his clients had invested millions into those few precious hours, everything had to be impressive and go off without a hitch.

Josh’s favorite project from that time was what he programmed for the Billboard Music Awards. He had to code software in Python that could handle real time pushes from a social media stream, coupled with integrated video feed activated through touchscreen technology, and format it for a nearby broadcast truck. Fans essentially would be able to video chat with their favorite celebrities as they walked down the carpet and people at home could watch over livestream. This required high-volume data flows with 100% uptime which meant that Josh was simultaneously managing A/V feeds, debugging livestream issues, patching API interfaces and adapting to hardware malfunctions in real time. What resulted was a very unique, personal experience for the fans, audience and celebrities and that’s what Josh is all about: bringing people together through code.

Docker images and how to run them

Tips and Tutorials / By Thomas Johnston

If you’ve been looking for the chance to get started with Docker but haven’t had the time to find out where, then this article is for you.

If you haven’t heard of Docker yet, pay close attention to the next section.

“stack of cargo trailer” by Guillaume Bolduc on Unsplash

What’s Docker?

Docker is software used to run virtual operating systems. This level of virtualization enables portability of settings, installed software, and users while staying lightweight. You can refer to these virtualized operating systems as containers. And, in the same way a container ship manages shipping containers, Docker lets you use your computer to manage and run containers.

Downloading Docker

If you don’t already have Docker on your machine, head on over to their getting started guide and do so.

Pulling an Image

To use a container, you’ll need Docker images to run. Although you can build your own images, let’s keep things simple and pull one from Docker hub. Let’s pull open a terminal and do that now:

docker pull hello-world:latest

1	docker pull hello-world:latest

Ok, so you may be saying “You expect me to blindly copy a command from the internet and run it in my terminal?” …ok maybe not… either way, let’s break it down and give you some piece of mind. Consider the following:

docker pull hello-world

1	docker pull hello-world

pull downloads the image specified in the options. In the command above, we’re downloading the hello-world image.

Before we talk about what latest means, we have to talk about tags. Let’s take a few steps back. An image name in the docker pull command is actually referring to a repository. Repositories have multiple images. You can pin a tag after the repo name to pick the exact image that you want to pull from a repository. They tend to be used to define version or as selectors for some image variant. In our case, we are grabbing the latest version of the hello-world image.

We can verify the install with:

docker image ls

1	docker image ls

Running docker image ls to reveal the hello-world image is installed

Running a Container

So far, we’ve managed to use up some of your hard earned computer storage. Let’s get into the meat of what docker has to offer and run this thang:

docker run --rm hello-world:latest

1	docker run --rm hello-world:latest

So we see some similar things like hello-world:latest specifying our image and a tag. It’s good practice to be explicit with computers because, when it’s up to them, they don’t always make the choice that you’d want them to.

Woah, what about the –rm though?

The simplest kind of image will perform some task. Once it’s done, you no longer need much of the results. By default, run will create a container from an image and keep it on your file system. If you need to debug the results of simple images or need the resulting container to persist that state, you can remove the –rm. I tend to design my images to not need containers sticking around.

If you haven’t run the container yet, do so now. You should see a friendly hello from the good folks at Docker as well as a reassuring message that you’ve installed Docker correctly.

You can then verify that you’ve cleaned up after yourself with docker container ls -a and see that there is no container listed using the hello-world image.

But Wait…There’s More!

If you or your company needs somebody with docker chops, come chat with us. We also have many other skills in the Dev Ops space.

You can stay informed on all of our posts by subscribing at the bottom of this page.

Easy Icon Generator For React Native

Tips and Tutorials / By Brian Fogg

A simple Javascript tool for creating, editing, generating and placing all icon assets into a cross-platform React Native project

Try it out

Clone this repo into your project: https://github.com/animallabs/react_native_icon_generator

In your Xcode project add a blank icon set:

Right click in the left column

npm i

node scripts/make_icons.js

node scripts/make_icons.js - for an alternate staging / dev mode icon

Edit project_name in scripts/config.js to reflect the name of your project

Like magic, you now have icons

Much of our work is in building proof of concept and early stage apps to demonstrate the viability of new products and ideas. With our requirements of speed and multi-platform deployment React Native is the clear choice.

When we’re prototyping an app we focus on the core functions and leave most of the extras for another future milestone. Despite this fast-moving approach, I really don’t like to send a deliverable to a client with the icons looking like this:

Unfortunately, and as many of you know, the process of creating these icons is tedious and frustrating.

Our projects often have a staging/dev version and a production version generated from the same codebase. When pushing these apps to beta testers it’s really great to provide unique icons to distinguish staging from production.

After much tedium and gnashing of teeth, I’ve built what I think is a very slick icon generator using Photoshop and the Sharp JS image processing library. https://github.com/lovell/sharp

Drop this folder into your React Native project in the root directory, run ‘npm install’ or ‘yarn’.

Add this line to your package.json file to keep things nice and easy.

“makeIcons”: “node iconGenerator/scripts/make_icons.js”

If all goes according to plan, this script will quickly generate all the icons you need.

What’s going on in here…

Photoshop Asset Generator

Photoshop includes a little-known asset generating feature that I highly recommend. The idea is that by naming a layer or group like this:

1024x1024 master_icon.png

photoshop will automatically generate this .png file at the specified resolution every time the file is saved.

If you want to get really advanced you can create text files in your repo like this:

1024x1024 master_icon.png 500x500 master_icon_500.png 200x200 master_icon_200.png 100x100 master_icon_100.png

and paste them into your Photoshop layers to get a variety of sizes.

Smart Objects

Another slightly advanced photoshop technique. Basically, we’ve got two groups in Photoshop that both reference the same “Smart Object”.

To edit the master icon, edit this Smart Object. You have two groups in the .psd file, one for exporting the production icon and another for a staging / dev icon. You can add overlays and modifications to the staging layer group in Photoshop and the modifications will not affect the master icon export.

iOS Method

First, the script reads your ‘Contents.json’ file stored in

{project_name}/Images.xcassets/AppIcon.appicon

After parsing out the required sizes from this file, the master icon is copied into `temp_output`, copied and resized to the requisite sizes, and finally, the images and modified Contents.json are dropped into the correct iOS folder locations.

XCode should pick up these changes automatically and you’ll see a nice display of your icons.

xcode docker iphone icon animal labs docker

Android Method

Android is not quite as automated but works well. Dig around in the ‘config.js’ file and you’ll find where the sizes and names are specified. I’ve included the correct format for React Native as of version 0.55.3.

Master icon is copied and resized in the working directory ‘temp_output’ and the generated files and folders are copied deep into the Android hierarchy.

Check out android/app/src/main/res/ to see the results.

Revisions

A slick npm package of this setup would be nice. Just haven’t gotten around to setting all that up. It’s open source and working well enough as is but of course a little annoying and manual to clone directly into the project repo. Of course, this is open source so feel free to pitch in with changes 😉

Before you go…

If you or your company needs somebody with mobile development chops, come chat with us. We have React Native developers ready to help you out today.