Menu

Colin Devroe

Reverse Engineer. Blogger.

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.

Repost: Daman Rangoola on Twitter

👉 Daman Rangoola:

Random iOS 11 bug: type 1+2+3 quickly in the stock calculator app, see what happens. Bet it won’t say “6”.

Attending October’s NEPA.js meet up

On Tuesday, October 10 I attended October’s NEPA.js meet up. John George of NEPA Web Solutions was this month’s presenter and his topic was Bitcoin and the Blockchain: Democratizing How We Exchange Value.

I believe all members of NEPA.js would agree, John’s presentation was arguably the best presentation the meet up group has had to-date. Though the Blockchain can seem a complex topic, John did an excellent job describing how it worked, where it is currently being used, and its future potential. Though the meet up was relatively well attended, I left wishing that so many more people had heard his presentation.

To further the lesson beyond the walls of the Scranton Enterprise Center, John also gave each attendee a gift in the form of a wallet containing a single bit of BTC. He also incentivized attendees to claim that bit for themselves by awarding the first few that did so with $50USD in BTC. Those that did it were rewarded indeed since the value of BTC has jumped to new record highs this month. Those that didn’t claim their bit may be kicking themselves for dragging their feet.

John will likely do this presentation again, in some form, under the NEPA Tech banner. Meet up’s like October’s are what is spurring the group to expand the group into a more general direction. This particular presentation had nothing to do with JavaScript – as the name NEPA.js would have you believe – and so we want to make sure each meet up is approachable by all that would be interested. You may remember me saying this over the last few months, and even in January I spelled it out specifically, but now there has been positive steps towards this happening. We’ll have more to announce in the near future.

Thanks to John for the amazing presentation, and for the bitcoin, and to the attendees for the active discussion.

Side note: My apologies for a terrible pano photo. I’ll try to do better next time.

GeekWire Summit: Satya Nadella, CEO, Microsoft

Satya Nadella in a video interview on YouTube at GeekWire Summit:

By the way, all of these efforts didn’t started three-and-a-half years ago. It was Bill [Gates] who started MSR and Steve [Ballmer] who started our cloud push.

A sprawling, candid interview with someone who may end up being Microsoft’s best CEO. I love that he doesn’t take sole credit for Microsoft’s most recent successes. Only a few hundred views on Youtube.

SOLO

Ron Howard:

Hey #Twitterville we just wrapped production so here’s a special message #StarWars

Follow the link for his video.

Cute. Howard seems to be having a ton of fun with this, which I think is great given the circumstances he walked into. I also think the name is great. It is what Jabba calls Han. SOLO.

Be a social developer

Dwayne Hinterlang on CodePen:

What if I told you there are even ways to connect with like minded people in person? Whether it’s quickly learning something for the first time, discussions of discoveries, pulling all nighters to breath life into an idea or even devoting yourself to achieving mastery! We can do them together.

Online resources, like Hinterlang spells out, are amazing and one can learn a lot from them. However, there is still no substitute for face-to-face meet ups, workshops, etc. You’ve read about this time and time again here on my blog. I think developers should go to meet ups.

Speaking of which. If you’re in my area, and you care about the intersection of technology, business, the arts, you may want to join NEPA Tech. I hear big things are in store for that group in the coming months.

Mike Monteiro on Twitter

Mike Monteiro on Medium on Twitter:

Twitter today is a cesspool of hate. A plague of frogs. Ten years ago, a group of white dudes baked the DNA of the platform without thought to harassment or abuse. They built the platform with the best of intentions. I still believe this. But they were ignorant to their own blind spots. As we all are. This is the value of diverse teams by the way. When you’re building a tool with a global reach (and who isn’t these days) your team needs to look like the world it’s trying to reach. And ten years later, the abuse has proven too much to fix.

We all miss the old Twitter. But it is gone and isn’t coming back. Many of us bloggers have covered this for the last few years. We all need to move on. But I’m glad Mike took the time to write about it. It is cathartic.

Rebuilding Slack.com

Mina Markham:

In August, we released a major redesign of slack.com, and we want to give you a peek behind-the-scenes.

She goes on to show tons of details on their latest redesign. There are several bits I found interesting such as their attention to accessibility, how they handle fall backs for IE11, and how they made responsive illustrations.

/via Brad Frost.

Micro.blog for Mac beta

Micro.blog:

Mac users can use the native Micro.blog for Mac app. It’s a free download and supports most of the same features as the iOS version.

You can see a short video of it on Manton’s blog. You’ll even notice a rather handsome avatar make an appearance.

Unfortunately I cannot give this a spin yet since I haven’t upgraded my Mac to High Sierra. And it doesn’t appear I’ll be doing so for at least a month or two since I haven’t seen any updates from Apple on that front. High Sierra just seems far too unstable to switch to on my main work computer at the moment.

Colin Walker, though, seems to like this new app:

Manton has repeatedly said that this is just a version 1.0 app but, I have to say, it’s been rock solid. Browsing, replying and posting to the blog have all been a breeze and I’ve not had a single issue or error.

Self-driving car accidents (because, humans)

Ryan Beene for The Seattle Times:

What they’ve found is that while the public may most fear a marauding vehicle without a driver behind the wheel, the reality is that the vehicles are overly cautious. They creep out from stop signs after coming to a complete stop and mostly obey the letter of the law — unlike humans.

So bots drive too well. Go figure.

Humans are terrible drivers. This middle phase of some driverless and some human drivers on the road can’t end soon enough.

ESO observes kilonovae

European Southern Observatory:

ESO’s fleet of telescopes in Chile have detected the first visible counterpart to a gravitational wave source. These historic observations suggest that this unique object is the result of the merger of two neutron stars. The cataclysmic aftermaths of this kind of merger — long-predicted events called kilonovae — disperse heavy elements such as gold and platinum throughout the Universe. This discovery, published in several papers in the journal Nature and elsewhere, also provides the strongest evidence yet that short-duration gamma-ray bursts are caused by mergers of neutron stars.

Just two neutron stars makin’ it rain.

What an incredible observation. Well done ESO.

Update: Here is the timelapse.

Smartify

Smartify:

Smartify is a free app that allows you to scan and identify artworks, access rich interpretation and build a personal art collection in some of the world’s best museums and galleries.

Gunseli Yalcinkaya, writing for Dezeen, calls it “a Shazam for the art world”.

This is cool. Can’t wait to try it out.

/via Dave Mark at The Loop.

Dan Moren on Movies Anywhere

Dan Moren, for Six Colors:

Dare I say, this seems like an indication that Hollywood is finally “getting it” where digital film purchases are concerned. Then again, with the continued encroachment of streaming, digital rentals, and peak TV, maybe they just got desperate.

Six Colors being a publication that knows how to use the internet and links to their subjects. See also.

Spotify’s Discover Weekly Playlist

Sophia Ciocca:

This Monday — just like every Monday— over 100 million Spotify users found a fresh new playlist waiting for them. It’s a custom mixtape of 30 songs they’ve never listened to before but will probably love. It’s called Discover Weekly, and it’s pretty much magic.

I’ve mentioned Spotify’s playlists before. They are incredible. They are magic.

Side note: While I was enjoying the synergy of Apple Music we’ve decided to switch back to Spotify today. It is just way, way too good at surfacing music. Also, it is much much faster and syncs better across devices.

No link? Boycott.

I’ve put up with this for far too long. And I’m not going to any more.

Publications that have the habit of linking only to their own web sites rather than to the subject of their articles will no longer get any traffic from me on any device. In fact, I’m going to go so far as to down-rate them on apps like Apple News and block my own devices from being able to navigate to their pages.

The straw on this particular camel’s back was a Variety article* about Disney’s new Movies Anywhere service. They reference the service multiple times throughout the article, having the name of the service linked but only to their own Variety.com URLs. When they do mention the URL of the Movies Anywhere service they spell it out like MoviesAnywhere.com and do not have it linked.

This is being about as bad of a net citizen as you possibly can be. It is also terrible for their readers. They, and many other publications, are reader hostile and this is but one of their tactics.

So, I’m done with them. I’ll be making a list of publications over time and sometime in the future I’ll share it**.

* No, I won’t link to it. They don’t deserve it.

** Added to them should be any publications that use Taboola.

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.

Oculus announcements galore

Be sure to check out the Oculus blog as they’ve announced a slew of new things. I’m still going through them all and will be sifting through it over the coming days. But, at first glance, I’m really excited to see this category of product move forward.

Here are the highlights for me (though there is a lot more)

 

Jason Snell on Twitterrific for Mac

Jason Snell:

I started using Twitter because of Twitterrific for Mac. When the Iconfactory first released the app, I signed up for a Twitter account and started chatting with my friends. That was ten years ago.

Ditto. I actually started using Twitter via SMS in 2006 then saw it bloom at SXSW in 2007 but then when I saw Twitterrific in 2007-2008 it became a daily (heck, hour-by-hour) habit.

Twitterrific for Mac

Iconfactory:

The Twitter app for people who actually use Twitter. Now all-new for macOS.

Imagine if Twitter cared as much about their desktop and mobile apps (and the people who used them) as Iconfactory does.

SnapThread

SnapThread by Becky Hansmeyer:

Portrait video compilations made easy—that’s what SnapThread is all about.

Like SnapChat without the network. I’ve long held that SnapChat and Instagram have the best UIs but it is a shame they aren’t just an app. Apple tried to solve this with Clips but that is only square-crop. This app could be very useful.