Menu

Colin Devroe

Reverse Engineer. Blogger.

Follow: @c2dev2, RSS, JSON, Micro.blog.

'

A new brand identity for The Watercolor Gallery

I’m excited to start a brand-new series here on my site — The Grand Brand Design Challenge. I’m equally excited to be starting this series with a personal project I’ve been working on since 2010, The Watercolor Gallery.

Read more about The Grand Brand Design Challenge on its own page.

I’ve only taken the time to design two logos for The Watercolor Gallery over the years. Some attempts I posted on Dribbble and a few never made the light of day. Recently, however, I’ve begun posting new content and interviews and the Twitter account is just about to pass 4,000 followers. So I thought it might be a good time to revisit the logo and refresh it.

Here is how this new logo compares to the previous one.

When embarking on a rebrand I typically like to pull some inspiration or an element from the previous logo into the new one. In this case, the ocean wave that I had prior has been pulled forward. However, a much stronger inspiration came from The Great Wave off Kanagawa. I wanted to somehow capture the motion of that great, classic painting and pull it forward into The Watercolor Gallery’s brand identity.

It took me a while to get these lines to work properly. And I’m sure a more critical eye would say they still aren’t quite there. But they are there enough for me for a small personal project. I’m very happy with the mark. Using the path tool in illustrator proved to be more challenging on this piece. Thanks to Kyle Ruane for his helpful tips in cleaning up a few things.

Above: A bunch of scribbles in my notebook of some rough ideas.

Above: An illustrator artboard with variations and attempts at the shapes along with the two main inspirations for the mark.

Above: A few variations of the logo mark for black and white and inverted options.

I’m looking forward to implementing this new logo design over the next year on the web site and social accounts for this project.

If you would like a logo for your project (company, app, etc) please feel free to reach out to me. I’ll do it on the cheap.

 

You should attend events, meetups, and conferences

I published the following article on LinkedIn in March. However, their publishing tool removed all of the photos from the post when I published it and I was so frustrated that I did not bother to go in and fix it. I’m republishing the post here with photos.


For over a decade now I’ve put in a lot of effort to present at and attend as many technology and business events as I can. I’ve attended events in Austin, San Francisco, Los Angeles, Honolulu, Orlando, Jacksonville, New York City, Philadelphia, Greenville and a half-dozen other US cities. But you don’t have to hop on a plane to attend events. I also attend several regional events per year that gets me back at home before bedtime.

In 2014 I wrote a blog post titled You should go to meetups and in it I wrote about one of the advantages of attending meetups or conferences:

Because there is a lot of energy at meetups. The presenters are generally at the beginning of their product cycles and they have a lot of positive energy to make something happen. Those in the crowd all have their stories, their ideas, their goals. And, in addition to those building startups you’ll generally find lawyers, venture capitalists, programmers, marketers, etc. who are willing to offer their help for your project. It is a very, very good way to meet people that you’ll likely work with.

This past year has been no different. Each event I made the effort to attend has yielded some professional and personal fruit. If you haven’t yet gotten to many events in your area, or elsewhere, I strongly encourage you to give it a try. And not just once.

Here are a few highlights from the events I’ve attended or presented at in the last 18-months alone.

NEPA BlogCon 2016

I’m going to start a few months prior to 2017 because I attended a few amazing events near the end of the year in 2016. First up is NEPA BlogCon 2016.

At NEPA BlogCon, an event specifically catering to those just getting started in blogging, social media, and marketing, it was evident the amount of care that went into organizing the event. Each year NEPA BlogCon has been refined to be more engaging, valuable, and fun. One thing this event always reminds me of, now matter how mature an industry or technology appears to be there are always new faces seeking to learn.

TecBridge Entrepreneurial Institute 2016

Marywood University is the host to an excellent annual entrepreneurship event that always proves valuable for its attendees. The 2016 event was very well attended and had an excellent panel discussion, workshops, presentations, and more.

At the time I wrote this about the event on my blog:

Rather than a panel simply answering questions broadly, the workshops helped the attendees to work through a problem and see the processes work step-by-step.

I think what I appreciate about this event each year is the focus on practical takeaways for attendees. If you are there to learn you will.

Cropped! A rebranding competition

Cropped! is a fun event held by AAF NEPA that pits a few creative talents against each other to rebrand a local nonprofit organization that could use the help.

Branding is my day job and so watching as these teams tried to solve the problems of organization’s current brand was fun.

Branding is about exposing an entity’s core purpose, principles, and offerings to the world. Rebranding is about fixing any problems the current brand has encountered.

I wrote the following on my blog after the event:

Branding is an exercise in getting a company’s culture, message, and purpose demonstrated and communicated through every single thing the company does. I know it has been said a million times but it worth reiterating that branding is not a logo. Branding permeates a company’s activities from the way they answer the phone to how easy it is to unsubscribe to their monthly email newsletters. I was happy to see that everyone at Cropped! knew exactly what branding was.

PhillyBurbs WordPress Meetup

You will not find a more inclusive meetup within 100 miles of my front door as the PhillyBurbs meetup. This one is always well worth the drive and some of their organizers have returned the favor to attend meetups in northeastern Pennsylvania.

One takeaway I had last year at this event was the impact a more inclusive culture will have on our industry. As more and more groups of people are represented in our industry the better it gets. For far too long the industry’s perspective has been dominated by white males. This is changing. For some it isn’t changing fast enough but I’m simply happy that it is.

Ask The Web Marketing Experts panel

Speaking of white males… 🙄

I, along with several other web marketers in our area, were invited to participate in a panel discussion and recording session at NEPA Alliance organized by the Scranton Small Business Development Center.

The questions from the SBDC and local businesses were great and I know all of the “experts” learned a lot from each other as well.

NEPA.js and NEPA Tech Events

I attended, and presented at, at least 7 monthly NEPA.js (which has now been rolled into NEPA Tech) events throughout 2017. In late 2016 Mark Keith decided to bring together a group of JavaScript enthusiasts each month to discuss JavaScript-things which bled into discussions on all sorts of technology, business, marketing and even cryptocurrency. The amount of value this one event has generated for our area is already incalculable.

I blogged about ever single event I went to so you can read all of my notes on my event tag on my blog at cdevroe.com.

Inventor’s Guild at TekRidge

I’ll often pop into some events with no real reason for me to be there other than to soak up whatever information I can. The Inventor’s Guild is just such an event. This event caters to people that want to invent things (or already have) and, hopefully, profit.

One thing I was reminded of at this event was how little the inventor typically profits off of their inventions when compared to the companies that license them and how important it is to understand patent and IP law if you’re an inventor of a physical product.

Wilkes-Barre Programmers meet up

I’m not a Python developer (which this Wilkes-Barre programmer event was geared to) but I was interested to see how this group was run. I found it very informative and challenging. One thing I realized by attending this event was how these events have a small gravitational pull. If you remove any mass from them by not attending they may just drift off into the ether. Never to coalesce again. It is important to support a small group with your presence even if it doesn’t align with your skillset or desired path. By helping to keep these groups together when they are small they can continue to grow and mature and eventually split off into the groups you want to see in your area.

In other words, don’t skip events just because their small. Small events beget larger ones.

SAIL by Second Wind

In March 2017 I flew to Orlando partly to get away from the winter and partly to learn as much as I could about running a digital advertising agency at Second Wind’s idea lab.

I learned a lot. There was hundreds of years of experience in the room and all were willing to share with one another. In fact, nearly a year later, this event still comes up in conversations with many agencies on a weekly basis.

I felt privileged to learn how other businesses throughout the country are solving problems of recruiting, employee compensation, retainer agreements, agency IP, and much more.

tecBRIDGE Entrepreneurial Institute 2017

I held a workshop at this years TEI event and it was a blast. The workshop format allowed me to bring practical value to those that attended it. The Q&A session was very good and I received emails from attendees for weeks afterward.

The entire event was very good and many business owners and students in our area, well over 200 of them, got a taste for what it means to be an entrepreneur and the inevitable challenges they face.

Other events

I attended a few other regional events including one for Unmanned Ariel Systems used in Surveying work at Penn State University, other WordPress meetups that I spoke at, a presentation about my as-yet-unreleased step counting mobile application Summit to the Lehigh Valley Tech Meetup, and also Ben Franklin’s VentureIdol and many others.

There has been no shortage of long-lasting benefit from each event I’ve attended over the years. I cannot overstate this enough, especially if you’re a remote worker or are operating from the hinterland — get out of your home office and shake some hands.

Are you an event organizer? Consider using Jujama to power your next event.

New office vibes – March 2018

Jujama’s Scranton, PA offices are 👌

Creating Summit: The current summit view

This post is the first in a series of posts about my experience building and designing Summit. This post focuses on just one view within the application; the current summit view.

The idea for Summit came nearly 4 years ago as far as I can tell. I’ve hunted around for scraps of paper, digital notes, code snippets to see if I can come up with an exact date but I’ve been unable to. And it has been fits and starts for several years.

When Kyle Ruane and I started on the idea we first thought the UI would be a bit more game-like. I envisioned a 3D model of the current mountain you were hiking that would progress the person up the summit in first-person towards each goal. This was altogether too much work, and far too difficult given my unfamiliarity with the platform. Kyle’s suggestion – again, many years ago – was to use a low poly look. He would craft a low poly representation of the summit and we could allow the user to move around in it, perhaps even spin it around, zoom in-and-out, etc.

I pulled that thread for a very short time before giving up. Remember, we started toying with the idea of Summit before Swift was released. So I was trying to draw this UI with Obj-C. Something I’m even more terrible at than Swift.

Here is what one attempt at drawing progress lines using Obj-C looked like back 4 years ago or so. I took this screenshot in June 2014 and was already labeling it “historical junk” in my files.

The red triangles were goals to meet, the blue line was your path, and the white line was your progress so far. My goal was to overlay this on top of the low poly art that Kyle drew. This was inspired by maps like this. (copied here for archival purposes)

This worked but was not that easy to pull of, introduced more complexity than we needed, and so we quickly shelved the idea until we got more familiar with the platform.

In tandem I began constructing a simple web UI to start cataloging steps from a phone. This was purely to get used to writing code that would track user’s steps, show stats, work on our step algorithm (the code that determines how far up Mount Everest a single step walking in a downtown city parking lot gets you), etc.

It went this way for a few years. I would open up a code editor and begin working on the pieces of Summit; the progress UI, the algorithm, the code to read from a user’s step count or HealthKit or Apple Watch.

In June 2017, when I picked up this project on my own to take on since Kyle had moved away, I decided I needed a simpler approach to the UI. In part because Kyle is the design genius but also in part because I wanted to get as quickly to shipping an app as I possibly could. I prefer to iterate on ideas with user feedback than to work on something in a silo for years. I wanted a way to show the summit, or some visual from the summit, but yet also show one’s progress. And I also still needed multiple goals per summit.

Here are a few drawings from this summer.

See, I’m not an artist. Admittedly, though, this wasn’t an attempt to draw anything beautiful but rather to get a general idea for all of the views I needed to pull off the layout. I needed some labels, some buttons, navigation, etc.

The long goal buttons was really “a punt” on my part. I gave up trying to get Xcode’s Storyboard feature to properly align a changing number of goal buttons (since each summit has a different number of goals) in a way that worked with each device size. It was very frustrating. So I began to go down this path of having them just be full-width, flat buttons.

But then I ran into Brian Voong on YouTube. In most of his video tutorials he suggests forgoing the Storyboard feature and using code to create the UI. Though I didn’t want to lose the progress I had made, I’m so glad that I took his advice. Writing UI directly in Swift is far, far easier (for me)  and seemingly more powerful than using Storyboards.

This revelation allowed me to go back to a drawing I did a month earlier. This one:

On the left, the elements needed, on the right, a rough sketch of a much more minimal and airy design of the current summit view. The goal buttons have varying distances between them relative to how far apart they are in real life (I’m still working on getting this right in the app).

Using Swift I was able to make this happen much easier than Storyboards.

The above is one of the very first swings at this view. It had all of the elements I wanted. And I’ve been iterating on this specific design ever since. I wish I had the hundreds of iterations saved but I don’t.

Here is what the most recent iteration looks like with goal buttons that are easier to determine your progress and other tweaks to make the UI more consistent.

This is the design for this view I’ve settled with for now. I have plans to iterate on this current design for some time before, perhaps, taking a whole new swing at it. Perhaps my skills will grow to the point that I feel confident going back to Kyle’s low poly idea. But, I’m pleased with how it has come along so far.

Developers, Let me tell you about Microsoft (audio)

I’ve been writing about Microsoft’s moves for the last three years. This week everything has come together and I’ve been writing my first multi-platform application using C# and Visual Studio. In this long rant I go on and on about how Microsoft needs to spread the word about what they are up to.

Links for this bit:

Download.

I’ve spent most of the day writing JavaScript (fun!) which was an opportunity to try out ES 2018, the MDN docs, and laugh while reading Eevee’s take on the latest JavaScript spec updates.

What’s new in WSL in Windows 10

Tara Raj for Microsoft:

We’ve been documenting many of these new features and improvements on this blog over the last few months, but we’ve often been asked for a single document listing all the new improvements, and with FCU (version 1709, build 16299.15) shipping on October 17th 2017, we thought it was time to publish a list these improvements!

We’re coming up on our first year of using Windows Subsystem for Linux (WSL) at Condron Media. I mentioned in January of this year that we’ve been using it pretty extensively. Since then Tucker Hottes has been getting the insider updates (or, beta updates) of Windows 10 and has enjoyed the incredibly fast pace that Microsoft’s teams are on. If you look at the linked blog post you’ll see the improvements are myriad.

A request: If you’re a developer using Windows 10 and know about WSL do Microsoft a favor and let other Windows-using developers know. Tucker and I are always amazed at the number of developers that have no idea about WSL still. In fact, just yesterday we met one and made sure to tell them about it.

To put this in perspective; Tucker is on Windows 10 and I’m on macOS. Yet, we use nearly the same development environment, configuration, tools, etc. This allows us to collaborate in a way that was previously much more difficult. Microsoft is doing great work on WSL and more developers need to know.

A unique color for every address in the world

A recent, yet-to-be-announced client project had me designing a mobile app interface that dealt a lot with showing locations and events that are happening at certain locations (how is that for vague? sorry).

While I utilized the brand’s colors to represent certain sections of the app I wanted the app to have tons of colors in order to portray a sense of fun throughout the app. But how could I incorporate pinks and yellows and bright greens without the overall brand disappearing?

After toying with a few design ideas I had an idea to create a unique color for every address in the world. This would result in two benefits; first, each location was then branded as a color, and second, every user would see that location as the same color. If I were a user of the app here in the US and I flew to Spain and looked at a location for an event  there, I would see the same exact colors representing that address as the person that lived in Spain and created that event.

Since I wasn’t to be the developer of the mobile application I wanted to avoid the possible pushback this idea might receive from that team. I didn’t want to add burden to the other people on the project by showing a design mockup and a set of requirements and then walking away. I wanted it to have zero overhead for the developers.

One of the solutions I discarded was generating a random color each time an event location was added to the service and then store the color for that address in a database. While this solution is relatively simple to implement it was no good. It adds more work for the developers and they have to maintain the datastore indefinitely. Several other ideas with the same caveats came to mind and I quickly tossed them into the bin.

Once I eliminated all of the ways I didn’t want to solve this problem – the solution came pretty quickly.

Since every address is already unique, I just needed to find a way to represent an address that could be turned into a color. In other words, I wanted the address itself to represent a unique color. And I wanted to do it in realtime as the application’s UI loaded.

So I jumped into JavaScript and began working it out. Here is what I settled on:

This solution allows for just over 16.5 million colors. Far more than this app will likely require during its lifespan.

Here is a demo of the process and if you view the source you can see the code at work. It is fairly simple to follow.

Oh, there was an issue that I ran into with this solution that was fun to solve. If the background color that was generated was too dark the text became hard to read. So digging around I found a way to determine the luminosity of the background color and thus change the text to something a bit lighter in those instances. That too is shown in the demo.

I was then able to repurpose this demo code and give production-ready code to the developer that is going to ship in the app. When that ships I’ll write more about it.

I can work on anything I want

One of the most enjoyable aspects of working on your own project is that there is so much to do. That may seem strange, why would I want to have so much to do? But if you look at it a different way it becomes a much more enjoyable experience.

Whenever I sit down to work on my pet project, a new iOS app, I can choose what I’m in the mood to work on. Perhaps I’m in the mood to work on the branding, editorial, licensing, or marketing? Or, would I prefer to hunker down into some Swift programming and refine the datastore, algorithms, animations, speed, etc of the app? Or perhaps I’d like to identify key strategic partners for my product launch or look through beta user feedback or do some artwork?

You see the point? Yes, there is a lot to do. And it can seem overwhelming if you allow it to be. But, no matter what type of mood I’m in I can make some progress on the project nearly every single day. And I’m having a ball so far.

Presenting at the July NEPA.js Meetup

Earlier this week my Condron Media cohort Tucker Hottes and I presented at the July NEPA.js Meetup. Our presentation was about automation and all of the things we can automate in our lives personally and professionally. And also how we employ automation in our workflows for creating applications and web sites using our own task management suite.

Here are just a few examples of reproducible tasks that you can automate that perhaps you haven’t thought about:

  • Your home’s temperature
  • Applying filters to multiple photos at once
  • Social media posts
  • Combining many files together into one
  • Deleting unused files
  • Calendar events

There are countless others. Perhaps you’re doing some of these things now. You might set a reminder for yourself to clean the bathroom every Tuesday. Or, your using a Nest to control your home’s temperature based on your preferences.

But there may be others that you’re not doing. Posting regularly to social media can seem daunting to some. But automating those posts can make it much easier to set aside time to schedule the posts and then go about your day. Or editing photos or video may never happen because you don’t have time to go through them all and edit each one individually. But these are tasks that can be automated.

We showed a quick demonstration of automating the combining of multiple text files using Grunt. There are a lot of ways something like this can be useful. Combining multiple comma-separated value (CSV) files that are reports from many retail locations, web development, and others.

Then Tucker provided a list of all the tasks we do when we get a new client at Condron Media. The full list can take a person up to 1.5 hours to “start” working on that customer’s project. So we’ve begun working whittling away at that list of tasks by using another task manager called Gulp. We call this suite of automation tasks Bebop – after one of the thugs from Teenaged Mutant Ninja Turtles.

Bebop is separated into the smallest tasks possible so that we can combine those tasks into procedures. Creating new folders, adding Slack channels, sending Slack messages, spinning up an instance of WordPress, adding virtual hosts to local development environments, etc. etc. Bebop can then combine these tasks in any order and do them much quicker than a human can clicking with a mouse. We estimate it will take 1 minute to do what took 1.5 hours once Bebop is complete.

Another benefit of automating these types of tasks is that you can nearly eliminate human error. What if someone types in the wrong client name or forgets a step in the process? Bebop doesn’t get things wrong. Which saves us a lot of headaches.

Here is the example Gulp task that we created to demo Bebop to the NEPA.js group.

We then asked the group to take 5 minutes and write down what they would like to automate in their lives. The answers ranged from making dog food to laundry to simple development and environmental tasks. Every one in attendance shared at least one thing they’d like to automate.

Tucker and I had a blast presenting but we enjoyed this final session the most. Similar to my event suggestions to Karla Porter earlier this year, I find that the more a group interacts with one another the more I personally get out of a meetup or conference. Presentations can be eye opening but personal connections and calm discussions yield much fruit for thought.

Thanks to everyone that showed up. I think we had 14 or 15 people. The NEPA.js community is active, engaged, and I’m very happy that it is happening in Scranton.