Posted on

Which Technology for Your Application?

You’re having a chat with a technical partner and something like this comes up:

“We’ll set you up with React with Redux to reach out to a Python and Flask based API which was connected to gRPC microservices running on a Kubernetes cluster”.

Whether you understand what any of that means or not, it’s almost assuredly overkill for your MVP application. That kind of a setup is meant to scale to tens of thousands of daily active users; a nice goal – but a massive case of overbuilding for the vast majority of startups. The best way to develop software is through a process of progressive elaboration; start with a simple technology, get it working, add complexity as needed.

Over-engineering is a costly trap you can easily fall into. Similarly, be wary of technical vendors who are adamant about specific technologies. Shoehorning your project into something they’re comfortable with might not be a wise approach.

We believe the best software is designed around the problems you need to solve; the specifics of what platform or language it’s built on is a secondary concern. Pushing too hard on one solution to solve all problems is often a sign of a high volume firm (cranking out tons of work following the same patterns) or just a lack of deep knowledge in building software.

Posted on

Welcome to the tech community!

As an admin of the Cleveland Tech Slack group and historically an active member of the local tech scene in Northeast Ohio, I get to field quite a few questions from new, budding programmers looking for a community to connect themselves with as they continue to grow. While my answer may change a bit from person to person in regards to what they are trying to get out the experience, it normally boils down to the following resources:

  1. Cleveland Tech Slack
  2. Launch League
  3. Local Meetup Groups
  4. Additional Resources

Cleveland Tech Slack

Located at https://cleveland-tech.vercel.app is a self signup form to get added to what I believe is the best resource for people in Northeast Ohio looking to build their technical network. There are channels dedicated to different technologies, a #jobs channel for finding opportunities for local/remote-friendly jobs, and works as a nice way to converse with someone who may happen to work at a different company.

Launch League

A great network of energetic entrepreneurs,  developers, and designers this is a great resource to tap in to the Akron, OH communities. While their focus is more directly geared towards entrepreneurs, they have a wealth of specialty user groups that they help to manage. You can sign up at http://www.launchleague.org for free which will give you access to their Slack group with another collection of wonderful channels.

Local Meetup Groups

If you’re interested in connecting with people, nothing beats getting out there and saying introducing yourself. This is how I got my start over a decade ago networking with the amazing talent this area has to offer. You can create a free account and search for groups related to Ruby, Go, entrepreneurship, and more at https://www.meetup.com.

Additional Resources

If you’re interested in perusing local companies, services, and resources there’s a great list at https://github.com/mrfright/cleveland-tech.

 

Those four items are a great way to get started with our local tech scene and to start building the relationships that will help you build your career.

One more piece of generic advice is to try and find a person who can help guide you through the troubled waters of technical and professional decisions. There is a #mentor channel in the Cleveland Tech Slack if this is of interest to you.

Posted on

Own the MVP Relationship

Focusing on building your minimum viable product (MVP), especially when your founders don’t have all the technical skills, is an exciting but challenging time for any startup.

From your dreaming, preparing businesses plans, and pitching, you have a pretty solid idea of what your MVP will be. It’s important to maintain that as a point of reference, but part of the world of software development is knowing that will change as you get more feedback about your product, its fit in the marketplace, and involve more people. Keeping that in mind you need to consider how you maintain a development environment which is flexible to your changing needs. The last thing you want is your application to be a black box of unfamiliar, inflexible, or proprietary tech. You know you need to work with outside vendors to build your app, but don’t let them dictate to you how your MVP will be built, and certainly don’t let them put you in a situation where you are locked in for later phases of the application.

A great way to make sure that flexibility is being maintained is to request that work on your MVP be completed in small deliverable pieces. Instead of building the entire app, you could focus on a user’s dashboard view first – even just putting in static data to start. This opens the possibility of testing the waters with multiple vendors. You can evaluate how you work together, their output, and real costs far better than just reading some pitches and looking at estimate numbers. It’s a great way to figure out who is really going to be a good fit as a technical partner.

Image c/o http://www.jopwell.com

 

Posted on

You’re Funded! … Now What?

So your startup just secured funding, congratulations! Whether it’s from a pitch competition, a traditional funding round, or an alternative source the next big step is getting the product ready to launch. We often work with companies at this stage, and we have a few tips about the process.

The first step is to adjust your focus; you’re no longer pitching and selling the idea but transitioning to delivering on expectations. It’s no less demanding, but requires a different mindset to succeed. You have to move from conceptual thinking to more pragmatic thinking.

The primary goal you have now is to build the smallest possible version of your product you can launch with, your minimum viable product (MVP). You (and your friends and advisors) probably have a huge list of features you want to support, but that will extend the time it takes to get to market, and if you estimate or plan poorly you may run out of funds sooner than expected. If you are out of runway you might need to ship whatever product you have, and that product may not have the key feature or timing the product needs to win the marketplace.

We strongly recommend avoiding these problems by creating a prioritized list of functionality and then building your app in such a way that value can be delivered incrementally. This is a good place to leverage your value proposition or mission statement; to really target what it is that makes you unique or you do better than anyone else.

Getting in the market (or at least in front of testers) faster allows you to get more feedback and respond to issues quickly. It’s better to find out early if you have made a bad assumption. Even working with well designed software it is much easier to change a small app than a large one; this is a big part of the philosophy behind what is called Agile software development. It’s beyond the scope of this article, but building in an Agile way aims to plan and build in response to market needs, delivering iterative versions of working software.

By focusing and building the smallest thing you can, you’ll get to market quickly and begin to really test the waters with your ideas.  

Posted on

Getting to Know Our New Neighbors

Ever since we moved into our new larger office, we’ve been exploring the neighborhood and trying to see what we can get involved with.

We’re just a block down now from the main branch of the Akron Public Library. They’re home to many interesting programs (and a great asset to the community), but the one that piqued our interest is the TechZone@Main. Offering up a wide variety of cool equipment and resources, anyone can stop in and use things like 3d printing, green screen video, audio recording studio, photo printing, laser engraving, and more.

What caught our eye was the vinyl printing. We’re working with a local company on getting some external signage for our new office, but we wanted to supplement that with some vinyl graphics for windows.

The library staff was patient and helpful as we prepared our files, and we even got to watch the printer in action, slowly building our graphics, making another pass to score the material after printing so you can easily peel off your custom shapes.

In a few minutes we had our prints; all we had to do was peel away the uncut areas and stick the vinyl to our glass.

Overall it was a great experience and we now look more official from the front door. We’re not sure if this material and approach is what we’ll use long term (and it’s hard to see in the photos), but this was quick and painless way to test it out and learn about the process.

 

Posted on

Stranger Things at Coffee and Code

Like season 2 of Stranger Things, Coffee and Code is adding some new characters. One of those new characters is me, Chris. I bring some new skills which will help to round out the Coffee and Code team. For example, while completing a masters degree I worked with a computer vision algorithm called seam carving. Seam carving is a great algorithm to demonstrate how the team’s capabilities are growing since what it does is immediately visible.  I’m going to tell you a little about how seam carving works and give some examples from the latest season of Stranger Things 2. There should be no spoilers here, but we will be working with images from the latest season, so you may want to turn back now if you have not watched the entire season yet.

Seam carving is a technique for adding or removing portions of an image without changing the main elements of that image. The devil is always in the details, but from a high level the process is pretty basic. The algorithm analyzes an image to determine which areas are less interesting. Then, it carves seams through those areas in ways which are hopefully not noticeable. Easy peasy.

We were thinking of interesting ways to demonstrate seam carving, and then we started watching Stranger Things 2. We love Stranger Things – well, we love most things about it. One of the few things about the current season of the Netflix hit that we would change is the number of blatant product placements. We get that they probably had to come up with extra funds to bring on Sean Astin for such a large role, but it often seems that entire scenes were built around product placements. So, Jon thought that we could fix this little flaw in our favorite show by carving out all of the product placements.

We expect seam carving to do a fairly good job of removing items from basic images, but also expect it to fall down quickly when given more complex scenes. Let’s consider a somewhat straight forward example.

When we run the image above through a seam carving algorithm we can bring the group closer together. The image has some distortions, but all of the important parts have been pretty well preserved.

If, however, we run a more complicated scene through the algorithm, the results are not that great. Let’s consider the scene where Steve and Nancy visit Barbara’s parents.

The algorithm preserved the details of the product placement and it made the people look like they were attacked by Demodogs. That’s the exact opposite of what we want to have happen.

The reason for the poor performance is that the algorithm thinks that all the high contrasting details present in the middle of the scene must be more important than the less detailed areas near the edges of the image. Of course, that was probably a large part of the intention of this scene — to prominently feature the KFC bucket meal. According to our unbiased algorithm, KFC got its money’s worth out of this scene.

The performance can be greatly improved if we give this algorithm some hints. It needs its paddles! We could add an object detection algorithm to find all the known objects in the scene, and then classify each for preservation or removal. But, for now, we just will manually mark which portions of the image to remove and which ones to preserve. Below is the result when we marked the KFC bucket for removal and marked the people to be saved.

While we were thinking of ways we could “improve” Stranger Things 2, we talked about removing some of the new characters.

If we were upset that Max beat Dustin’s Dig Dug record, we could tell the algorithm to scrub her out of the scene.

We didn’t got too much further down this path, especially after the episode where Max … well, we’re not going to spoil that for you. The next steps towards automatic product placement removal would be to add in some sort of object detection, perhaps using a neural net trained on product logos from the 80s. To remove characters we could add facial recognition after the object detection step. But, that will have to wait for another time, we need to go finish watching season 2.

Images copyright of Netflix and the awesome group from Stranger Things.

Posted on

Bigger Team; Larger Office

I’m happy to introduce Christopher Stoll, the newest member of the Coffee and Code family! Chris brings a wealth of programming experience and team building skills and acts as an anchor for our company’s future direction. I am very excited for what he brings to our group and what that means for the future of Coffee and Code.

Building a talented, well respected team is difficult work and I’m extremely proud of what we have accomplished together since Eric joined me over three years ago. However, Coffee and Code has never been known for being sedentary, and are constantly looking towards the future and how to provide even more value for our clients.

Our future includes building a friendly environment for fostering future generations of developers and designers. Chris’s skillset will help us to not only continue to produce top quality work, but will help to further build our specialized team whose talents amaze our clients and outshine our competitors.

In addition, our future facing growth has paved the way to our brand new office in downtown Akron located between two green spaces and next door to a coffee shop. We need room to develop our desired company and our new space provides just that. We’re still in the process of making it feel like home, but we’re planning to have an open house as soon as the dust settles.

If you’d like to be invited to our open house, or would like to keep tabs on what we have going on, please sign up for our newsletter.

We are still laser focused on delivering the same high quality output that our clients have come to expect. Our entire company focus at this point is producing a more cutting edge and future focused team that can help our clients execute on their ideas while providing a sense of direction and stability in a seemingly unstable technological landscape.

– Jonathan Knapp, President and Founder

Posted on

A Deep Dive into Home4Care’s Design

We recently completed the Home4Care project for Hearthstone Alzheimer Care, a company committed to meeting the evolving needs of people living with Alzheimer’s disease and dementia as well as supporting their families.

The goals were to combine the knowledge and processes Hearthstone had learned through their research with an easy to use interface for caregivers. The app offered specialized activities like games and quizzes, plus education for the caregivers and features for planning out their day.

Design Focus

The challenge of building an application whose goals included active use by people with dementia was unique and challenging for us. This was our first chance to expand upon our basic efforts at improving accessibility and making our sites and applications usable by as many people as possible.

While we’re familiar with WCAG guidelines, ARIA tags, and tools like contrast checker, we’re not experts on working with people with dementia and alzheimers. Fortunately, the team from Hearthstone is and proved to be invaluable resources in guiding our design efforts.

Critic

Initial Direction

We started out the project the way we always do; with discussions and research. We wanted to employ an aesthetic and tone that was simple and modern, but also inviting for users (many of whom may not be tech savvy). We looked to other products in the same industry space, as well as well-designed pieces from elsewhere in medical fields, caregiving, and personal planning for inspiration.

research board

We drew upon that research to present several iterations of element collages to the Hearthstone team. One of our favorite deliverables, element collages are a way to explore how an application might look without getting caught up in implementation details or worrying about content.

different ui elements

Intentional Design

Included in our element collage documents is an entire page dedicated to the rationale and accessibility concerns of different design decisions we were suggesting. While there’s certainly subjective aspects to any design, we strongly feel that the best designs are not just visually appealing and on-brand, but are formed from well-researched and thoughtful decisions, backed up with solid rationale. To that end, we think that forcing ourselves to explain ourselves early on in the process is a tough but necessary step. We also test color combinations for recommended WCAG contrast and present the findings.

Eric and Byron

Moving Forward

After some iterations through our initial designs, we quickly moved into applying these choices (colors, type, layout options) to some realistic content. We started out with a photo grid treatment for the home screen of the app – filling the screen with large touchable areas made sense and seemed like an elegant way to utilize what was essentially just 4 main options. We could update the layout based on screen orientation, and it would scale easily. When we talked through this with the Hearthstone team, we learned some valuable lessons.

menu with large clickable areas

To potential users, large touchable areas probably wouldn’t be obvious as points of interaction. Furthermore, while we took the idea of stock-style photography as a nice way to create visual interest, it was brought up that users might take the imagery too literally, or be confused by the people and activities pictured.

Armed with a better understanding, we adjusted the starting screen to use four large, obvious buttons. Those conversations helped guide our decisions throughout the project.

Into the Details

As we designed and built the application, we found ourselves looking at some details more closely than we expected. We started the project using Aleo for headlines and button choices. It’s clean and legible, but being a mild slab serif gives it a little bit of personality which we thought helped the app feel more welcoming. Even though the serifs are fairly straightforward, the feedback was that certain users might struggle to quickly read the letters in some contexts. We transitioned to Rubik, a very simple sans-serif to be as clear as possible.

We also examined the usage of ligatures. Ligatures are the connecting glyphs between certain characters in a typeface.

ligature example

They come from traditional typesetting; benefiting printing by simplifying the physical blocks that were required for frequent letter combinations. They remain in many digital forms as a nod to heritage, and give materials a traditional, stately look. We don’t usually give them second thought, but with clarity as our primary goal we chose to use font-variant-ligature in CSS to disable them, giving us a plainer, but from some studies measurably easier to read design.

Building a Design System

The actual nuts and bolts of designing different pieces for the application are where we leverage Atomic Design or similar systems. The goal is to create reusable elements that serve as building blocks for most common views and features of an application. Having such a pattern library established allowed us to build new things with consistency and speeds up development time greatly.

atomic design elements

We had a lot of fun working with the talented team at Hearthstone Alzheimer Care on this project and hope this peek behind the scenes will help you think a bit differently on your own projects.

If you’re interested in some help along the way, we’re always interested in speaking to new clients. You can contact us at info@coffeeandcode.com.

Posted on

Flight Midwest Startup Conference 2017

I recently had the opportunity to attend the second annual Flight conference in Akron. Put on by our friends at Launch League, this was a great event promoting and enriching startups regionally. Experienced founders and supporters shared their experiences on a variety of topics, and there were high quality panel discussions as well.

It was refreshing to attend Flight not as a presenter or sponsor but just a regular attendee. It was a useful change in perspective to allow myself to get immersed in the day without being preoccupied with other tasks. One thing that I thought was much improved over last year’s conference was the scope and focus of the the programming. The inaugural conference was very broad with speakers talking about everything from design to dev ops. This year it was honed in on startups and their concerns. I thought this helped with expectations and just made everything feel more organized and coherent.

Heading into the John S. Knight center for the conference

When selecting which presentations to attend I forced myself to go to things I wouldn’t normally go to. I’ve been to enough design and development talks that they really need to be a specific niche or topic to pique my interest. This turned out to be a great strategy though, as I pushed outside my comfort zone and had some great discussions.

Two of the presentations in particular I found really useful:

Mark Weisman from Navidar opened up by explaining that his company works as an technology-focused investment bank; which neither invests anything (in a traditional sense) nor functions as a bank. It was a great start to add some levity to what could be a very dry topic. He explained that their primary service is to work with companies who are entertaining buyout/acquisition offers or seeking them to try and get the best price (and the most offers) possible. There were some great stories of work that they did, and the kinds of details that most people wouldn’t even think could affect deals or valuations.

While we’re not pivoting into the finance industry, it really resonated with me how they only work with companies at a certain point in their lifecycle. It’s something we’ve done as well; we work great with teams who need to build an MVP, or need front end and design help to assist their small back-end staff. How we might better position ourselves that way and options for further defining our best clients were in my head all day after hearing this.

Ryan O’Donnell from Sellhack talked about strategies and tools for a sales process. As someone who’s always been on the creative services side of businesses, I’ve tried to stay as far away from ‘selling’ as possible. But, Ryan’s talk was fantastic and made me consider diving in headfirst to help out. His products Sellhack and Replyify help you build upon some LinkedIn strategies for finding ideal clients for your business, contacting them, and following up in an organized and efficient way. It never felt ‘sales-y’ at all, and he shared some great stories and examples of the things he actually uses day to day. We’ve always focused on passive marketing efforts, using speaking and our work relationships to find new potential clients. As we look to grow though, we’re looking at starting some more legitimate sales and content marketing efforts.

Overall, I had a great time at Flight and look forward to see what next year brings.

Posted on

Hack N Akron 2.0: A Continued Story of Community Involvement

On Saturday, April 22nd 2017, the second iteration of a hackathon series called “Hack N Akron” took place at White Space Creative. The goal of the event was to use community volunteer time to build creative solutions for civic problems that the organizing team, myself included, discussed with the city prior to the event.

This is a 12 hour event that starts at 7:30am with a public opening ceremony at 8:30am that included speeches from:

Hack N
Group photo of the Hack N Akron opening ceremony. Photo Credit: Meghan Goetz

After the opening ceremony, volunteers quickly disperse to meet up with their project managers so they can be briefed on their project background, figure out what their deliverables look like, and start working on tasks.

Teams working during the hackathon
Focusing on skills-based volunteering, your role will match what you’re best at. Above we have Mori and Roger working on long term strategy while the rest of the team builds today’s application in tandem.

I’ve had a number of meetings directly with the mayor and his staff to figure out what sustainability looks like for these projects. The city of Akron has been incredibly open and willing to set aside some of their budget and effort to actually begin using a lot of the solutions that are being created from scratch at our hackathons, and even donated their time and infrastructure to host and maintain the more technical solutions. More was done during the hackathon, but the technical solutions that we were involved in include:

  • An Open Data API that allows software developers to gain access to city economic development data. This allows them to search and parse data as they see fit, coming up with trends, patterns, and correlations the city may not have thought of previously.
  • A “City Health” dashboard that gives non-technical users a visual look into charts and graphs that show the economic development data we were able to put into our API.
  • An application that allows a user to search for land based on its current use.

We’re always excited to be a part of events like this. In fact, we had all three of us involved in one way or another:

  • Jon Knapp: Team leader and participant of the Open Data API team.
    Open Data API Team
  • Eric Browning: Team leader and participant of the Open Data Dashboard team.
    Open Data Dashboard Team
  • Byron Delpinal: Co-organizer of Hack N Akron and project manager for the Open Data Innovation team. (Not pictured because someone had to take the photo!)
    Open Data Innovation Team

At the end of the day, participants have the ability to get about 10 hours of work in. With a volunteer attendance of around 50, this is approximately 500 service-hours of time. This equates to $11,495* of value in one day that is donated by local professionals to help better our city in one way or another, and does not take into account the countless planning meetings, sponsorship dollars, and space donations given for the event.

In short, we were happy to be a part of such a great event!

*Volunteer value calculated using the Independent Sector Volunteer Time Value.