Run your iOS App in the Playground

You may have wondered if you can run the whole app inside the playground!, say you want to experiment a little faster.
Here we will go through the steps needed to achieve that.

Add the playground

Click file ->new->Playground and create a single view playground , give it a name e.g. playground and save it somewhere, then go to the directory where you saved it and copy it to your project.

Create a Cocoa Touch Framework

We need to create a framework that can be exposed to the playground later on.
To do that select the project file and under the targets section and click on the + button then choose Cocoa touch framework and name it something like playground.

Update the target membership of the source files

For the playground framework to be useful we need to add files to it, and since we are trying to run the whole project we need to add all the project files to it , and you can do that by going to the files and bundles and from the file inspector -> target membership check the playground box.

Import the project in the playground

This is where we get to see some results finally ,

@testable import playground

@testable is needed here so that the internal methods would be accessible from the playground, otherwise you need to go to each class and mark any function, property or type as public.

Cocoa pods

If you are using cocoa pods you need to add these lines to the podfile , which will add the frameworks to the playground framework target, and remove the need to code sign it. add these lines to your pod file.

given your target name is myapp

target 'myapp' do
    target 'playground' do
        inherit! :search_paths

and after that add these

post_install do |installer|
installer.pods_project.build_configurations.each do |config|

installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|

Same goes for any other framework, where you need to update the target membership of it and include the playground framework target.

Separate the playground framework from production

Since you don’t want the playground framework you just created to be shipped with the app, which will add extra space to the app binaries, you can create a development target instead and un-link the playground framework from the production target.


  • Whenever you change something in your project, you need to build it first to be able to see it on the playground.
  • Playground is not that smooth most of the time, so I won’t rely on this technique for heavy testing , but it can be nice to try out part of your project logic directly.


That should be it , you can find a working example in the demo repo, feel free to download it and try it yourself.

Cleaner way to handle UITableViewCell

Its really funny and confusing when you start to implement the cellForRow or itemForRow datasource method.  Usually we do that in the ViewController, or in a special dataSource object, and you find yourself asking where should you add that piece of code responsible for configuring or handling the Cell, you would then add it in the Cell subclass itself or just bring more code to the ViewController that is barely controlling his direct view(s).

In a non-trivial world you won’t just set the title and description for the Cell, ending up with 2 to 3 lines, no!, there will be buttons, images , special layout , events and a whole set of operations going on, that is when you handle that in the ViewController it’d be messy and looks so wrong!!!


Yup , Just like UIViewController , we need a UITableViewCellController, its a bit long name so we will use CellController , since it can be a table view cell or collection view cell, or any list based views element.


simply to isolate the mess of handling a cell.

How does it look like?

class UserCellController {

let cell: UserTableViewCell
let model: UserModel

init(cell: UserTableViewCell, model: UserModel) {
self.model  = model
self.cell  = cell

func configure() {

// here we fill view items

private func fill() {
//e.g. namelabel.text =

private func style() {
//e.g. namelabel.cornerRadius = 10


Inside cellForITem or the method you handle the filling the cell. 

let model = ….

let cell = …

let cellcontroller = UserCellController(cell: cell , model: model)


Now you can fill,configure and style the cell based on the model, you can validate the model and modify the input or anything else inside the CellController instead of the tableView datasource method.

As you noted there is a loose end here, as the CellController object should not live in memory for long, and its pointing strongly to the cell object, given the same cell object should be reused and filled with other content.

Based on how many cells can be visible, the table will allocate certain number of cells and keep reusing them.

To solve that we will keep these controllers a live by adding them to dictionary inside the Viewcontroller in our case.

private var controllers: [Int: UserCellController] = [:]

and inside cellForRow…

let cellcontroller = UserCellController(cell: cell , model: model)


self.controllers[cell.hash] = controller

The trick here is to use cell.hash as there are a fixed number of hashes since cells are reusable inside a tableView .


now we can handle filling and styling the cell easily , what about actions coming from the Cell itself, what if you have a button inside the cell and you want to handle it inside the ViewController since its probably something bigger than our little CellController can handle.

In that case , it is as simple as adding completion handler to the CellController constructor, or add call back as property , or  Streams as in RxSwift as property , or delegate Oo (just kidding,don’t) …



That should be it , you got yourself a separate controller that can handle list items more cleanly than dumping all the functionality inside the tableView datasource since life is not that simple and you will need to have a lot of functionalities handled by the Cell.


Useful Tools and services for iOS development 

I’d like to share a few tools I use when I work on iOS projects.


Consist of a set of great tools that you can easily integrate to your app , one of the most valuables tools for me is Crashlytics where you can send Beta builds and receive crashes when they occur. You can add as many apps freely and manage them, and you can have teams with ability to manage their access. Also service hooks is really handy e.g. send a slack message when a crash reaches some level on some App. Answers tool will give you Analytics with many options as setting events ,observing retention, engagement and many more.. All you need is download the fabric app and it will guide you through the integration seamlessly. There is an iOS app for fabric for tracking your apps.


Automate your deployment from generating certificates to uploading to the App Store , it’s wonderful and time saving. One of my favorite tools is match which will automate certification and provisioning for the whole team using git, along with register_devices action you will be able to add new devices , recreate certs and profile without even visiting (you still need to have access to the apple account). It has many actions and the docs is neat, you may check the many examples as well. (Having some knowledge of ruby will be very handy to you).


The famous dependency manager for swift and Obj-c. It allows you to use open source / private libraries easily, few commands and your up to go. It makes it easy to update your dependencies and easy for Pods makers to update their Pods, so when there is new swift version , all you have to do is to update the Pods and you should be fine (JK you still have to suffer 😂😅, but it will be easier 😄). Another important feature is private pods that you may share with your team privately.

Another famous dependency manager is Carthage which I don’t use a lot, but one thing good about it is that it makes build time faster, so if you are using a big and well known frameworks you may consider using carthage for them, and leaving smaller and less complete libraries in Cocoapods so that you can change and experiment on them on Spot.


An awesome tool for code generation from static files such as fonts , images , string files , nibs/storyboards, colors from .clr files.. which means no miss spelling errors and you get compile time assistant. I made this script that will generate Obj-c class from localizable.string which is a good practice to have your Strings encapsulated in methods or properties ..


It allows you to generate Model classes from JSON Objects, which is very useful for mapping API responses. It supports Java,Obj-C, and Swift, with number of libraries like Mappable, Realm, CoreData … JSON Accelerator is another amazing tool with the same goal for obj-c ,java, and Python.


To generate app icons including icons for App Store, all you need is to upload 1024 icon and you will get all icon sizes for ios,android, and watch os.


Upload an IPA and send it to the customer and they can view it on the web, no UDID needed!!!. Its great for demoing an example of a library or framework you made instead of asking the user to download and integrate or making a gif!!!. Really useful and amazing.


This is the best GUI tool you can get to deal with Git and its free!!. It make working with Git a breeze. You get many options  like commit,push,merge,rebase,stash,resolve conflicts,reset , log all commits for certain file and revert to any version , add to index ,remove ,ignore ,checkout from any commit and more without the need to use terminal… though you still have terminal button to use terminal for more advanced operations .
If you use bitbucket like me, you get clone in sourcetree button for faster cloning as bonus, but you can have account added in the App and you can fetch all your repositories and clone any without going to bitbucket website.

Another tool is Github Desktop but with way less feature than sourcetree. Still useful to have it to use the open in desktop button in github !!.


Its awesome website that you should check if you have not, where you can find amazing controls for iOS, macOS, watchOS,and tvOS. there are thousands of useful open source projects mainly as UI Components. Most of the New Projects have appetize embedded and you can try the control before using it. I would suggest to keep checking it from time to time , and to try to contribute in the projects.


awesome website for importing and generating xliff files for iOS, you simply import your xliff file, update the translation on the website and then export it to be used in Xcode.  is not free but you can generate android xml and iOS .string localization files altogether.


Paw (trial)

Best API Tool I ever used , what makes it great is that it can generate code for you in many languages, which you can use for fast prototyping. Paw has ability to add extensions for Importers (e.g. API blueprint, swagger, postman) and Exporters (curl, swift , java ..). and many other features.

Sketch (trial)

The best tool to design a mobile app, its simple to use for developers, where you can easily explore the design given by the designer and export its elements, figure out the sizes and colors , and modify the design easily. It’s even simpler for non-designers like me to use and make nice designs with help of free resources like this amazing website .

One amazing thing is that its pluggable where you can find many plug ins that do awesome features like AutoLayout by anime . Another nice thing is that it’s vector based where you can design in 1x and export in 3x and more , plus with the ability of Xcode to handle pdf you can export sketch resources in pdf :).

PaintCode (trial)

Will convert your SVG drawings and designs into Code ,swift/objc/android/javascript . Having the design in code will give you more abilities , simply you can customize anything like fill color, border colors/width/shape, etc.. and one important thing is Animation, PaintCode have a feature called Variable which makes it easy play with things like colors, positions, rotations …


These are useful subset of tools That I use always and works perfectly for me. There are many great tools out there that can make your life better and it’s good to try and see, one website that can help in that is

Xcode interface builder Tips and tricks

Xcode 8.2, Interface builder, Storyboard, Swift

Hey, I wanted to share view tips and tricks you may use if you like laying your design in interface builder.

Media Library

In the Utilities section (the one on the right), there is libraries section where there is the Object Library we use all the time, on the right of it you can see the Media library where you can find images way faster and drag-drop them into your views. Your images are not supposed to be in an Assets Catalog, but I noted 1x images are not recognized.

Localization Lock

Allows you to look some or all of a view properties. Comes in handy to avoid accidental modification e.g. on layout or strings. You can lock the whole storyboard from Edit menu -> Localization Lock or specific views from Identity Inspector under Document.

Embed In /Unembed And Arrange

You may have a couple of views you want to bundle together under a UIView/ScrollView/stackView, Instead of dragging new view and then drag them into it , you can select them and from edit->Embed in you may select one of the options UIView/ScrollView/stackView, and you can embed your scene into a UINavigationController/UITabbarController unless its a Tab Bar Controller, in case it’s a navigation controller it can be embedded into a Tab Bar Controller only . The other way you can select the containing View and choose Unembed from editor. Note that Autolayout constraints will be cleared.

Arrange (send to front,back,backward, and forward): select a view and from edit->arrange you may change its order among its siblings view (same level).

Refactor to storyboard

You may select a scene or more than one and the edit->refactor to storyboard then you will be asked to name the storyboard and you will have a new storyboard file with the selected scene(s).

First Responder

It’s a set of functions that can be applied to the first respondere.g. TextField. There are some of functions already defined such as undo,selectAll,copy,… . plus you can create your own functions. all you need is to connect UIControls actions in the storyboard as usual but now with the First Responder.

Color Palette

This is very useful feature , since you will use certain set of colors redundantly in the project, it’d be helpful to create a color palette for ease of access. You may check how from here.

Designables And Inspectable

Marking a UIView subclass as @IBDesignable will tell the interface builder to refresh the view whenever a change occurs to its attributes. Although in more complex scenes and bigger storyboards this feature could be a pain to the compiler and you may ending up turning it off 😀 .

Marking a property as Inspectable will make it shows in the Attributes Inspector and allows you to edit your custom properties from the interface builder.
Using Both features Can be great for prototyping. To avoid slowness you need to turn off “Automatically refresh views” form edit menu. plus make your storyboards smaller.

That’s it for now, will keep adding whenever I find more interesting IB stuff. Hopefully they come in handy.

Xcode : Create color Palette in Interface builder

Every project has its own set of colors, and if you use Interface builder like me, then you probably would like to create a color set for each project so you don’t get mad when you want to set a color for some text and not finding it in the “Recently used Colors” Section !.

You can simply create your own color palette in IB by clicking on the color picker -> Color palettes -> Click on the settings icon and click on new. 🙂

After that you can click on the settings icon again and rename the palette. And then you can add the colors related to the project you want.

And here you can see how it’s done in pictures . Have fun.


screen-shot-2016-12-15-at-10-31-49-am screen-shot-2016-12-15-at-10-32-08-am screen-shot-2016-12-15-at-10-32-15-am screen-shot-2016-12-15-at-10-32-31-am screen-shot-2016-12-15-at-10-32-42-am screen-shot-2016-12-15-at-10-33-34-am


Xcode 8.1 umbrella header not found

I have an xcode project that I use as a framework.
I got this issue after upgrading to xcode 8.1 saying ” Umbrella header ‘nameofmodule.h’ not found’







create a header file and name it as your modulename is.

screen-shot-2016-11-21-at-2-45-38-pm screen-shot-2016-11-21-at-2-45-47-pm








in the header file add these lines

#ifdef __OBJC__

#import <UIKit/UIKit.h>


FOUNDATION_EXPORT double <#modulename#>swiftVersionNumber;

FOUNDATION_EXPORT const unsigned char <#modulename#>swiftVersionString[];


thats it.



Protect your project from dependencies (iOS – swift)

The Issue

Here I will talk about some ways I use to protect my projects against changes in its dependencies.
Whats clear is that every library/framework you use in your project would change at some time, and sometimes we change our mind about these dependencies and replace them with others.

Lets first talk about replacing a library. So we have some library that filter an image, lets call it MOImagesFilter, where you provide it an image and what filter you want to use and then it returns the filtered image. Later you find that this library produce a couple of bugs or does not work well with orientation or 3x screen …. And you decide to use a more famous library called e.g. FastImageFilters! and try it.

But wait …

You already imported MOImagesFilter in 10 classes , and in each class there is a couple of lines related to it. FastImageFilters may have totally different APIs and eventually you find yourself updating 30 lines of code !!! Oo

Adapters to the rescue

The idea here is to point all those calls to one class thats more native to our project where you don’t event need to import it in other classes. That class will be responsible to translate the library we intend to use into one formatted language our project understands.

So we create a class lets call it ImageFiltersAdapter that deals only with MOImagesFilter and does what it does , so we don’t have to deal directly with MOImagesFilter directly at all.
We predefine a set of functions that we actually need from the library , we might not need all of the function , in our case we only needs a function where we give it an image with the intended filter and it returns a filtered image.

Later on if we decide to use FastImageFilters we only change in the adapter class , not all the e.g. 3o lines of code and 10 classes.
Another benefit is that we might not need all the functionalities from some library but just a subset.
Also anyone including you when later tries to understand what we are doing here with the filter class will understand easily instead of going to the original library and read through it.

This not only useful when we replace libraries but also when we update a library where its APIs may have changed.

Puzzpic : Share Puzzles


Share, Solve, And Have Fun 🎉



Puzzpic is an amazing app to share images with a riddle where users can post an image and it get shuffled as a challenge for others to solve. And you can explore others’ puzzles and solve them to gain the original Images.

The Idea

You Get what You Solve.

You have a time limit for each puzzle where you thrive to solve the puzzle.
If you make it !! you get the solved Image and have the power to save it or share it as a prize.
Otherwise you lose it and you won’t be able to see it again!!.

Sounds Fun right !!! 😀 😀


Here I will talk about the features you get in the app and how to use them.


Simulator Screen Shot May 16, 2016, 10.54.12 PMWe need you to register first in the app which will allow you to Post Puzzles, like puzzles , follow other users, and to be identified when you solve a puzzle, and give you Points.

In version 1.1 you can Login with Facebook as well. Although the normal register/Login is simple since all am asking for is an email, username, and a password.

Explore Puzzles

In the main Screen, you can view other users or your puzzles categorized in three categories.


Where the latest updated puzzles appear, these puzzles are public.


Where the most liked puzzles in the last 7 days(although this may change) appears. These puzzles also are public.


Where puzzles of the users you follow appear, these puzzles might be public or set to be only to Followers.

You can solve and/or like any of these puzzles unless they are yours then you only can like them.


SolverWhen you tap on the Solve button under a puzzle of your choice you get the SOLVER Screen, which is a very simple screen , where you will see a shuffled image and try to solve it within the time limit.

You can swap any two blocks (not only adjacent)of the image by Tapping on each Block. Dragging is not supported right now but It’s on the RoadMap.

If you Solve it by the time the image will not be shown anymore in the Explore (main) screen and will be shown in a different screen called Solved-puzzles screen where you can access it from the Left Menu.

Otherwise the puzzle will be deleted from the main screen and not shown anymore!! 🙁 .



makerThe Maker Screen is where you create your own puzzle and it’s dead simple with a nice design.

You can access this screen by tapping on the plus button in the main screen.

You will see the camera running in a box which exactly the size of the puzzle.

Above The Camera Box there is a Level chooser , you need to choose the level before taking the image since the Camera Box will resize based on the chosen level.

You can Snap the Image by tapping on the big circular button, and then magically the image will be shuffled instantly and the upload button along with other button will appear, I call it the Editing Box where you can add caption or shuffle the puzzle again or retake it or upload the puzzle.

 Always add caption to your puzzles to make them more attractive.

When you tap the upload puzzle you will get a nice uploading view indicating the progress, in this view you can choose to cancel the upload or continue using the app while uploading.

Solved Puzzles View


From the Left Menu you can open the Solved puzzles View, and this is where you find the puzzles you successfully solved. You can tap on each puzzle and save and/or the share the solved puzzle.

you can also heart/unheart the puzzle and check the user behind it profile.

Profile Page

This is where you can see your profile and edit your profile image or edit your Name.

When you visit other users’ profile pages you can Follow them and check their puzzles as well .


There are other features including Reporting a puzzle or user , block other users you don’t want to see their puzzles.


Am continuously working to improve the App by fixing issues, adding new features and making sure it’s still nice looking and easy to use.

Some of the features am intending to add

iPad Version 


Notifications and Notification Center

Private Users

GRID View For showing more puzzles on screen

Private Puzzles Where user can send a private puzzle to another user

Points And Reward Systems By giving points to another actions not only solving the puzzle.

I Hope You enjoy the app , you can install it from here.

Follow Puzzpic on facebook

Follow Puzzpic(@puzz_pic) on twitter

Puzzpic Website

Adding CocoaPod for your library (public/private)

Adding CocoaPod for your library (public/private)


This post takes you step by step into how to integrate cocoaPods with your library.

CocoaPods is a dependency manager for Swift and Objective-C Cocoa projects

Am going to use an open sourced project I made before on github, and add the cocoapods into it. For you to keep up with me.

  1. Create a repository on github.

You need to Sign up first before you can create new repository. Click on the upper right plus button and choose New Repository. For Reference Lets call it YourPod.

The name should be unique, and make sure to add a license file.

2. Clone the repo

clone the repository for github using their App or through command line

git clone<YourAccountName>/YourPod.git

3. Install Cocoapods

From the terminal type

sudo gem install cocoapods

4. Structure Folders

cd to the folder where you cloned YourPod repository.

Let’s create 2 folders one called YourPod, and the other called Demo.

  • Add your library swift files under YourPod
  • Create an xcode project under Demo Folder
  • Commit Your Changes
  • Push them to github


Before creating the pod. From your repository github page.

  • Click on releases
  • Click on Add release button
  • set the version to be 0.0.1 (this is important, you can set it to any number you want )
  1. Create podspec

From terminal, type

pod spec create YourPod

that will create a podspec file. Open it using xcode or any editor you like.

After you open it, it will look like this ( after removing comments and leaving most of the required attributes) do |s| = “YourPod”
s.version = “0.0.1”
s.summary = “A simple HUD to indicate activity, success, and failure.”
s.description = <<-DESC
You can use this Library as a loading indicator while waiting for response from api, you can mention failure and success as well
s.homepage = “Your project home page "
s.license = { :type => “MIT”, :file => “LICENSE” } = { “Your Name” => “Your Email” }
s.social_media_url = “ be any link)"
s.platform = :ios
s.source = { :git => “", :tag => s.version.to_s }
s.source_files = “YourPod/*.swift”
s.resources = “YourPod/*.storyboard”, “YourPod/*.xcassets”
s.requires_arc = true
# s.dependency “JSONKit”, “~> 1.4”

The license file should be available on the remote repository (e.g. github repo) and belongs to the release you mention in the podspecs file

2. Validate the podspec

From terminal run

pod spec lint YourPod.podspec --verbose

On success you will get “YourPod.podspec passed validation.”, watchout for any warning or error* — verbose is for more detailed logs which should help you if there is any.

3. register the pod in the CocoaPods repo

Now we have our pod validated, we need to push it into cocoapods so others and we can use it. To do that first we need to declare ownership. Simple run this command in terminal from the same directory of the pod.

pod trunk register <YUOREMAIL> ‘<YOUR NAME>’ — description=’owner from macbook pro’

you will get this response

[!] Please verify the session by clicking the link in the verification email that has been sent to <your email>

you should get an email with the validation link within a minute.(It might goes to the spam folder)

4. Upload your pod

Now all we need is to push our pod, simple use this command from terminal.

pod trunk push YourPod.podspec

you should get “ — March 16th, 04:08: Push for `Your pod’ has been pushed (2.792570047 s).” alike message in the terminal.

“if you added your twitter account in the podspec, you will get mentioned in an auto-generated cocoapod new pod tweet ”


Now lets try it

  • Create a Podfile in the same directory where your demo.xcodeproj is.

Your pod may look like this

platform :ios, "8.0"
target :Demo do

if your pod in swift you need to add use_frameworks!

now run

pod install

It will download the pod and create an xcworkspace for you .

Now use demo.xcworkspace , import the pod into your demo and try it.


you can use a private pod as well although you need few more steps.

  1. Create your own specs repository (where the pod’s podspec file is going to be hosted) (lets call it myspec)
  2. create new folder locally and copy the pod you made before and podspec file.

3. Create new repository for your pod on e.g. bitbucket and upload the files like we did before don’t forget to tag it, you can do it by running

git tag 0.1

and push the tags using

git push -u origin —- tags

4. Add Your specs repository

pod repo add <yourSpecsName> <yourPodRepoDirectory>
pod repo add myspec

5. Now in your podspec file change the version and source url (it’s better to use https) (Validate as we did before), then push it using >


pod repo push myspec MOHUD.podspec — verbose

6. finally in the Podfile add source to refer to your specs repo.


source ""
source ''
##Note: you need to add all resources

Thats should be it .


Now your Pod should be searchable in (if its public)

a nice thing about it is that they will rate your pod based on some metrics like documentation, it worth looking at it and trying to improve your rate.

I hope this helps someone, if you have any comment please add it.

And Thank you for reading.


you can find more detailed info at Cocoapods

Lesson Learnt : UItableView Header always appearing

This is just something I faced tonight

I have a UITableView with PLAIN Style

in the dataSource the sectionNumbers is “1” I swear !!

when I run it into simluator the tableView is shifted down by some 20 pixils !!

The first thing came to my mind is to go and check it on the Interface builder
and from the ‘Size inspector” there is a property called ‘section height ‘ which set by default to ’22’
So yay I just need to change it to 0 and thats it, and thats what I did :
I typed 0 in the field and pressed a BIG Enter problem SOLVED 😀 .. but wait !!!
its not set to 0 !!, instead its 1 …tried again , maybe i just missed the zero the first time !!
but it insists to not to leave the ‘1’ , well ‘I said’ nobody cares about the extra pixil down .
ran it and everything looks OK … or better at least …
my freacking “consciousness” kept tingling me :/ ‘ I need to fix it ,and whyyyyy this happens’

So I took a look at the code and I found that this class is a subclass of another that handle the tableView Delegate ( srsly don’t do alot of subclassing , things may become messy )
SOO I found this code somewhere

-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
    UIView *header = [[UIView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 0)];
    return  header;

mmmmm looks I was trying to add some section header but then I didn’t, but wait !!
ok there is a bad non necessary method here but the ‘height’ is zero and there is no really a header …
although am getting the 22 height empty header on screen !!

srsly I dunno , but deleting this method removed the 1 pixil header … 🙂

OK OK I went to the ducomentation and I read this ( again ‘consciousness’)
This method only works correctly when tableView:heightForHeaderInSection: is also implemented.”
only !! 
so looks if we implemented the ‘viewForHeaderInSection’ no matter what object it returns the ‘section Height’ will be set to 22 as a default value .. unless we implement the  ‘tableView:heightForHeaderInSection: ‘ method WHICH I did not …
but why in the size inpector I couldn’t set it to 0 !!! .. 

Well, I guess it will remain as a mystery .. one little mystery for tonight.. 🙂

P.S. for some reason there is no spelling checker and yeah there will be speeling errorss