How to make perfect iOS screenshots with a clean status bar in 2018

Image for the post

Hi friends,

Before we begin

Before I begin, I am assuming you are already running your UITests using fastlane.tools. If not, I would suggest that you get yourself familiarized here. It saves you lots of time and it is especially indispensable for solo developers like myself.

What is this article about?

This article is about improving your iOS marketing material: the screenshots.

So, we will go from this:

Starting point

to this:

Goal of this article

We will be using fastlane.tools in combination with SimulatorStatusMagic library. SimulatorStatusMagic is used to create the perfect status bar:

  • 9:41 AM is displayed for the time
  • The battery is full and shows 100%
  • On iPhone: The carrier text is removed, 5 bars of cellular signal and full WiFi bars are displayed.
  • On iPad: The carrier text is set to “iPad” and full WiFi bars are displayed.

The text above is taken verbatim from the library’s description.

Why would you want to do that?

Well, such attention to detail adds extra value to your product by making your marketing material that much better than your competition. If you take a second to scan the Apple App store, the top apps provide some level of consistency in their marketing material. It follows, you should work towards achieving a similar level of consistency because it is not really not that hard. And if you set this up once, it will work.

So, I wanted to the improve the screenshots that I use to market Daily Vibes in my next update.

What did I try?

Installed SimulatorStatusMagic using cocoapods by adding the following line to my Podfile, like this:

pod 'SimulatorStatusMagic', :configurations => ['Debug']

Next, I found the following two articles and they gave me good starting points. They were perfect for me because I wanted to use flags in my code like this:

How I wanted to import the library

This would allow me to only import SimulatorStatusMagic during fastlane.tools run.

And, I also envisioned using this one flag throughout other areas of the code.

What I envisioned

So… putting it all together, I wanted something like this:

How I wanted fastlane.tools and SimulatorStatusMagic to work

But, I could not get it to run exactly like that 😭

I really wanted to get this to work. However, as a result of these issues you need some tweaking in 2018.

So what is my curent solution?

  1. import SimulatorStatusMagic
  2. leverage snapshot’s launch arguments - FASTLANE_SNAPSHOT is set to true
  3. call in code as you wanted
    if NSUserDefaults.standardUserDefaults().boolForKey("FASTLANE_SNAPSHOT") {
    ...
      SDStatusBarManager.sharedInstance().enableOverrides()
      setupScreenshotData()
    ...
    }
    

And the code above works … but I will be first to admit that it is not the perfect solution.

As it is currently written, you will need to play the commenting game:

  • comment out import SimulatorStatusMagic and
  • comment out SDStatusBarManager.sharedInstance().enableOverrides()

during regular development and do the reverse during fastlane.tools run.

So… during regular development:

What you have to do during regular development

and … during fastlane.tools run:

What you have to do during fastlane.tools run

As I am familiar with Ruby and Swift, and can get by with Objective-C, I tried to make it work how I wanted and find the source of confusion. I did look at the xcodebuild arguments and scanned fastlane.tools source code up to here. But, since there is only so much time in the day and I work on this during my free time - I did not narrow down the problem.

So if you have a different solution that allows me to run the code how I wanted, please reach out to me via twitter. I will gladly adjust this article to incorporate those changes.

Otherwise, I hope that you enjoy this working solution. I was puzzled during my research in 2018 and I did not see a solution so hopefully this helps someone in upping their screenshot game.

Thanks for reading,

Alex

Note: This article was also published on LinkedIn

Unless otherwise mentioned in the post, those projects are side projects which I work on on weekends and evenings, and are not affiliated with my work or employer.

Tags: software development, software engineering, tutorial   |   Report a bug via Twitter

Improving iOS performance with Xcode and Instruments for dummies

Image for the post

Hi friend, is your app running a bit slow? Are you, perhaps, unsure what to do about it? Where do you start to investigate? Perhaps, like me, you started searching 🕵️‍️ in your code for something evident? (Only to realize that you are going down a never ending rabbit hole?)

Well, stress not my friend because Xcode got you covered ✅ and it will help you find your issues (or put you on the right track at least).

This is a second article that I am writing about an Integrated Development Environment (IDE). The more that I use Xcode, the more I like it 😎 Xcode is really, really awesome. Just give it a try and use it.

Side note: it only took me 182 hours to get to the Instruments panel.

I’m actually really surprised at the amount of tooling that is given to you in this wonderful IDE. My software engineering training gave me my introduction to IDEs via Eclipse and NetBeans. I’ve spent years using those tools (and don’t get me wrong, they are powerful). But to be completely honest, to this day I will pick anything else but these two. They are ugly, clunky, and not intuitive 🌶

Why did I type that paragraph above?

Because if you have an aversion to IDEs and think that Xcode looks just like the other IDEs, then I am here to tell you that it really is not. Xcode IS a pleasure to use and I use it every day. (PS: If you are getting angry while reading this and saying !?Xcode sucks!? Don’t get so upset. I will admit, it is not perfect.)

Instruments

It is this powerful thingy, built on top of DTrace, that comes with Xcode. No need to install extra software. Just download Xcode once and you have everything you need. Don’t have internet connection or you don’t want to be connected? No worries, you can still DO your work.

Oh yeah… I used this wonderful youtube video to get an introduction to Instruments. Apple ofcourse has their own documentation which you can get here.

The following text is basically my brief overview of Instruments.

When you open Instruments, it looks like this:

Xcode Instruments

You can launch Instruments like this:

Opening Xcode instruments open

Or like this:

Opening Xcode Instruments

(I didn’t want to leave you waiting while my slow computer takes its time to compile and open up… but you get the idea)

What you do next is kind of interesting. All of the icons that you see above represent the different kinds of tool that you can run on your application. (I think of this screen as a collection of apps for your app). Hopefully you will understand why I say on your application.

Out of all of the available options, I’ve only gotten familiar with Activity Monitor, Allocations, Leaks, and Time Profiler. Oh yes, not only are these tools wonderful but the naming conventions are intuitive and grouped by colour. Amazing.

Activity Monitor and Time Profiler are in blue. These blue thingys are used to monitor CPU stuffs.

Allocations and Leaks are in orange. These orange thingys are used to monitor memory stuff. (Guess what this other orange Zombies thingy looks at? Did you guess RAM stuffs? Cool right!!!)

You might be wondering to yourself… all of these thingsys are cool sounding, so what? What do I do with them? Well the cool thing about these thingys is that you can just JUMP in and you will figure things out as you go. It is that easy.

I suggest that you play with the other tools available. I am going to focus on the Time Profiler for the rest of this article. At this point in the learning, I found it to be the most useful for me.

Time Profiler - I’ve been using this for…profiling… time? 🤷‍ Basically, I open it up and it looks like this:

Time Profiler in Xcode

You might be asking, now what? How about we hit that big Red Record button ⏺ ? Yup, and it will look like this:

Time Profiler after hitting record button in Xcode

Now what? 🤔

Now you use your app! What Instruments, or should I say Time Profiler, does in the background is it samples your environment… Time Profiler records what it sees your app is doing during a specific time interval. Makes sense?

And if you have ever used software that has some kind of manipulation of a timeline, then you will be just fine.

So this is a snapshot of how your app behaves, or its environment: Time Profiler Sample in Xcode

time profiler records many such samples at a regular interval over time: Time Profiler time line in Xcode

until you press the stop button ofcourse: Time Profiler from start to stop in Xcode

Now what? 🤔

Now you get to take off your developer hat 🎩 and play a detective 🕵️‍ … for real… how cool is that?

Since we are exploring the Timing Profiler, we are interesting in timing. You can open up (expand) the tree, that Xcode conveniently made for you, and go exploring 🗺. See which areas or which methods in your code take a long time. It very simple. Just click expand ⏬ and dive 🏊‍ in: Start exploring Time Profiler in Xcode

Don’t know where to start? Try this:

  1. Click record
  2. Play with you app as regular user (try various uses case)
  3. Stop the recording
  4. And then… you can filter specific time intervals!! How cool is that?!?!?!

Here is an example of me recording as I create a new to-do in dailyvibes and then filtering various time intervals. You can really isolate the various time intervals, like so:

Example of using Time Profiler in Xcode

As you can see, to filter you simple Click and Drag on the timeline… just like any other application with a timeline. It is just that simple. And, when you filter, if you notice, the tree changes. Thus you can really get into the nitty gritty details and find out your problems 🚧.

Oh, and… and… and you can SAVE this sampling and come back to it later: Saving Time Profiler in Xcode

Here is an actual example of me diving deep into the tree 🌲. When you find something juicy, like this: Example of Time Profiler in Xcode

You can… double click on the method, and it will show you EXACTLY which lines 👀 of code that may be troubling: Double clicking on a method in Time Profiler in Xcode

Conclusion

There you have it friends. I’d like you to take away three things from this:

  • Xcode is pretty awesome 🔥
  • Be a digital detective 🕵️‍ and give Instruments a try
  • Be careful ❌ of premature optimization

If you liked this, please let me know. I like hearing feedback so I can improve. You can find me on twitters.

Until next time,

Alex

PS: I hope I did not offend you with the *for dummies tagline. I love technical documents but I feel like they need a bit of flavour sometimes. I simply want this technical mumbo-jumbo to feel relatable and friendly.

Update: This article was also posted on medium

Unless otherwise mentioned in the post, those projects are side projects which I work on on weekends and evenings, and are not affiliated with my work or employer.

Tags: software development, software engineering, tutorial   |   Report a bug via Twitter

How to call Javascript debugger from Xcode? Can you?

How to call JS debugger from Xcode?

Hi friends,

Daily Vibes Apple Store Screenshots

In a previous release of ⭐️ Daily Vibes 📲, version 1.3.0, I added a natural language date parser. What this basically means that if you enter

appointment with my accountant tomorrow at 3 pm

⭐️ Daily Vibes 📲 will understand what you mean. This is all possible because of the wonderful work done on SwiftyChrono. However, I shipped 🚢 it with some pending things that are needed to be taken care of with the library. Figured I would fix it later down the road since it seems to work as expected 😅

This week, I’ve decided to tackle the issues and help updating SwiftyChrono.

Github SwiftyChrono PR

Internally, SwiftyChrono uses javascript for testing. After the upgrades, I wanted to make sure that the tests work.

JavaScript [Core]

So, I began 👀 looking for issues ⛈

One of the issues was narrowed down to be in this area of the code:

Problem code image

If you notice, it is just javascript that is being executed. I know javascript so it should be no problem to debug, right?

Well, for starters, how do you debug javascript that is executed from Xcode? How does Xcode run javascript? This leads you down the rabbit hole to find that Apple has nicely introduced JavaScript Core internally (more info).

So…the tl;dr

It is very easy. Apple has built a nice interaction between Xcode and Safari.

The credit for the following steps to this answer goes to Rakesh Yembaram on stackoverflow.com

1. Open Safari and Enable Developer Menu

  • Open Safari
  • Enable the Develop menu by going to:
    • “Preferences”
    • “Advanced”
    • “Show Develop menu in menu bar”

Show Develop Menu in Menu Bar of Safari

2. Enable JSContext

  • Go to Develop menu Develop menu in Safari

  • Find your simulator or computer agent and enable

    • Automatically show web inspector for JSContexts
    • Automatically pause connecting to JSContexts

Enable JSContext in Safari

Download Daily Vibes

3. Re-run project in Xcode

For my example, I’m just going to simply add debugger keyword to the Javascript file

added debugger to source code

and then I press run on the tests press run on Xcode test images

and I wait until Safari does its the magic:

safari doing magic

There you go, hopefully now you can see that it is not that difficult to debug any javascript that your app might contain.

Thank you for reading and until next time my friend.

⭐️ Download Daily Vibes 🚀

Sincerely, Alex

Unless otherwise mentioned in the post, those projects are side projects which I work on on weekends and evenings, and are not affiliated with my work or employer.

Tags: software development, software engineering, productivity, growth, tutorial   |   Report a bug via Twitter

January and February Reflections

Hi friends,

Can’t believe how quickly January and February came and went. I hope you’ve had a productive start to the year.

Calendar image from https://pixabay.com/en/timeline-planner-success-achieve-3168323/

I wanted to look back on the amount of work that done in the past two months

January

A lot of things happened in January.

  • Daily Vibes is available on the Apple App Store. If you haven’t downloaded it yet, just give it a shot (download).
  • Added a sign up sheet for beta testers:
  • As a result of shipping, started fixing bugs 🐞 here and here
  • was frustrated with App Delivery … a bunch of times …comes as a benefti of exposure to the Apple Ecosystem I suppose 🤔

February

Continued incremental improvement of Daily Vibes

  • Updated Kickstarter page
  • Adding small UI accents that I was longing for
  • While using DV, I noticed myself wanting to add multiple entries at the same time. So, I wanted to build something in.
  • This error took a few days to fix …
  • This error also took a few days to correct

Apple Store

I uploaded Daily Vibes to the Apple App Store simply because I wanted to have it out there rather than keep it under wraps. I figured I would add value to the software as I go. In retrospect, it was a good decision because it allowed me to find value quicker (as opposed to when I was working on the app under wraps).

After listening to some feedback on IndieHackers I decided to start working on ASO (Apple Store Optimization). Signed up for Apple’s Ads. Signed up for their Affiliate program. Started researching.

What I have learned so far:

  • Title matters
  • Description matters
  • Keywords matter
  • Having screenshots ??? apparently matters
  • Having a video ?? apparently matters
  • Description and other stuff that you have to fill in… doesn’t matter

What else I have learned?

  • What you actually put in any of those fields doesn’t really matter. Don’t get attached to your App name, App Description, Keywords or anything else to do with it. This is important for indie developers with no ad budget. Why? Because we want to be found so people use our software.
  • If you have a budget then you can pick your Branding carefully and you can ignore what I said above

So, while working on improving Daily Vibes I am also looking at improving my overall marketing. I am going to do it iteratively and learn along the way.

What is my plan of attack?

  • improve title (Daily Vibes ➡️ Daily Vibes: Life Task Manager)
  • improve subtitle (Todo List & Life Day Organizer ➡️ To do list, life day organizer)
  • improve keywords; currently haven’t decided:

to-do, list app, list maker, task list, todo list, list, task, todo, to do, life organizer, daily

todo,list,organizer,tracker,task,project,things,productivity,to do,to-do,keep,reminder,day planner

life organizer, good vibes, daily tasks, daily office, daily calender, daily lists, daily organizer, lists maker,

  • make screenshots localized with pretty text (via fastlane.tools) … something like:

LocalizedScreenshot sample

  • make AND edit AND upload a video

Video WIP Screenshot

  • improve aforementioned screenshots
  • improve aforementioned video

All of these ideas are up in the air while I am writing this post. I am hoping to ship them with next release, hopefully sometime next week. Then, I will have to wait and look at the analytics.

Conclusion

A lot of work goes behind the scenes for a single app. I am beginning to appreciate indie developers and their successful products. You really need to be comfortable with wearing ALL of the hats that make a successful business.

For me, marketing is an uncharted area and I was hesitant to start learning it. But look at me now, I can make icons, promo videos, and start being strategic about growth. It is a journey that I am enjoying but it is challenging.

I also paved the road and did all of the necessary paper work to add in app subscriptions. Now I just gotta figure out my strategy in this area ;)

Oh and in closing news, I wanted to keep to a somewhat relaxed 2 week shipping cycle… and so far I have been sticking to the schedule of regular updates =) I hope I can keep this up!

Download Daily Vibes

Thank you for reading and until next time my friend.

Sincerely, Alex

Unless otherwise mentioned in the post, those projects are side projects which I work on on weekends and evenings, and are not affiliated with my work or employer.

Tags: software development, software engineering, productivity, growth   |   Report a bug via Twitter