Ememobong Akpanekpo

Moving iOS keyboard away from blocking textfield when typing

2019-11-14T11:00:00+00:00

Phot: Keyboard blocking bottom textview

One common problem faced by iOS developers is that of the iOS keyboard getting in the way of textfields positioned at the bottom part of the screen when a user is typing. This usually leaves the user stuck and guessing.

To avoid this, the entire view has to be lifted up like so while the user is typing:

Photo: Keyboard not blocking bottom textview

We aim to shift the entire screen view away in proportion to the keyboard height when the keyboard appears and return it back to position when the keyboard disappears.

To acheive this, we need to create some util methods to shift and return the screen when the keyboard appears and disappears keyboardWillShow() and keyboardWillHide() and another to determine the keyboard size getKeyboardHeight().

@objc func keyboardWillShow(_ notification:Notification) {
        view.frame.origin.y = -getKeyboardHeight(notification)
}
    
@objc func keyboardWillHide(_ notification:Notification) {
        view.frame.origin.y = 0
}

func getKeyboardHeight(_ notification:Notification) -> CGFloat {
        let userInfo = notification.userInfo
        let keyboardSize = userInfo![UIResponder.keyboardFrameEndUserInfoKey] as! NSValue
        return keyboardSize.cgRectValue.height
}

The point where y = 0 is at the top of the screen, to move the view up above the keyboard we subtract the the height of the keyboard using gotten from getKeyboardHeight(). This totally handles the issue.

But how will we know when the keyboard is about to slide up?

Notice that all methods require a Notification object. The Notification struct is a container for information broadcast through a notification center to all registered observers.

NotificationCenter is one of means swift uses to announce information throughout a program across classes. One of the information it can announce is the keyboard appearing or disappearing. There are a lot more information it can announce than just keyboard events.

And just like we would have to tune in to a radio station to listen to what the radio station broadcasts, objects have to subscribe to or observe notifications before it can receive them. So to know when a keyboard appears or disappears, our ViewController must subscribe to be notified when an event is coming up - the event here being the keyboard showing or disappearing.

func subscribeToKeyboardNotifications() {
        NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillShow(_:)), name: UIResponder.keyboardWillShowNotification, object: nil)
        NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillHide(_:)), name: UIResponder.keyboardWillHideNotification, object: nil)
 }

Here:

self refers to the object registering as the observer which is our ViewController in most cases.

#selector(keyboardWillShow(_:)) - specifies the message the receiver sends observer to notify it of the notification posting. The method specified as a selector must have one and only one argument (an instance of Notification).

UIResponder.keyboardWillShowNotification or UIResponder.keyboardWillHideNotification refers to the name of the notification for which to register the observer; that is, only notifications with this name are delivered to the observer.

object - specifies the object whose notifications the observer wants to receive; that is, only notifications sent by this sender are delivered to the observer. If you pass nil, the notification center doesn’t use a notification’s sender to decide whether to deliver it to the observer.

Linking up the ViewController and the NotificationCenter

To link up the ViewController with the NotificationCenter , we call subscribeToKeyboardNotifications() from viewWillAppear()

override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        subscribeToKeyboardNotifications()
}

Unsubscribing from keyboard events Best practises require we unsubscribe from events when our app is not active or no longer listening to them. To unsubscribe from keyboard events:

func unsubscribeFromKeyboardNotifications() {
        NotificationCenter.default.removeObserver(self, name: UIResponder.keyboardWillShowNotification, object: nil)
        NotificationCenter.default.removeObserver(self, name: UIResponder.keyboardWillHideNotification, object: nil)
}

Finally we call the unsubscribeFromKeyboardNotifications() method from our viewWillDisappear() to disconnect our viewController from communicating with NotificationCenter.

override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        unsubscribeFromKeyboardNotifications()
 }

Glad you stopped by. Getting the keyboard out of the way from now will no longer be an issue. If you have any thoughts or questions please feel free to reach out.

7 awesome shortcuts every productive iOS developer must know

2019-11-13T03:30:00+00:00

As a developer, knowing your IDE is one very powerful key to being productive while you work. Building for iOS with XCode can be daunting at first but here are a few shortcuts to keep you productive and make you feel like a pro.

1. Open quickly any file (Shift + ⌘ + O)

Photo Open quickly XCode

With this you can search and open virtually anything in your XCode project. Press Shift + ⌘ + O and the Open quickly dialog will pop up. Something like this: As you can see I searched for the AppDelegate file and main storyboard file for the project.

2. Hide/UnHide the Navigator Panel (⌘ + 0)

Photo: Hide/unhide navigator panel

The Navigator Panel is located on the left side of XCode and helps you navigate around the project. But more often than not you need some more real estate for your content at the center so you can work effectively. Press ⌘ + 0 to hide/unhide the navigator panel.

3. Hide/Unhide the Utility area (⌥ + ⌘ + 0)

Photo: Hide/unhide utility area

You can hide/unhide the Utility area to gain more space for your content at the center. The Utility area is located on the right side of XCode and contains different inspectors depending on which item is currently selected on the navigator panel. Press ⌥ + ⌘ + 0 to hide/unhide the utility area.

4. Quick Documentation (^ + ⌘ + ⇧ + ?)

Photo: Quick Documentation

To quickly access documentation for any swift class. Highlight the required class and Press ^ + ⌘ + ⇧ + ?. You will be presented with a pop up dialog showing you the class documentation. This however requires internet connection.

Alternatively you can get there faster by pressing and holding the ⌥ key and then left clicking on any swift class. Once you press the ⌥ key, your cursor will change to a + icon, which you can move around. When it comes across any swift class it changes to a ? icon, then you can now left click on this class to view the documentation.

Photo: Quick Documentation

5. Reformat/Indent your code(^ + I)

Photo: Indent Code

Unorganised code can be difficult to read and review. Save you future self and code reviewer needless stress by organising your code before you commit. There is no need to manually indent as XCode will indent it for you as per the style guide. Select the code area you want to format correctly and then Press ^ + I

6. Hide/Unhide the debug and console panel (⇧ + ⌘ + Y)

Photo: Hide/unhide debug and console panel

You can hide/unhide the debug and conosole panel to gain more space for your content at the center. The console panel is to the bottom right and the debug panel is to the bottom left. Press ⇧ + ⌘ + Y to hide/unhide the debug and console panel.

7. Make a quick commit (⌥ + ⌘ + C)

Photo: Making a commit

Are you done working on a cool feature and you want to make a commit. The first shocker most iOS developers have in XCode is the absence of a terminal. No big worries about that if you just want to make a commit. Just Press ⌥ + ⌘ + C

P.S: In case you may be wondering what the keyboard shortcut symbols means, here is a brief about the shortcuts used in this article.

⇧ - represents the Shift key

⌘ - represents the Command or Apple key

^ - represents the Control key

⌥ - represent the Alt or Option key

Building a Reactive Android App using Agera

2019-11-11T21:00:00+00:00

Originally published on 28th Sept, 2017 on Medium

The hardest part of learning react programming is thinking in Reactive — Andrea Staltz

Thinking Reactive

If you are a beginner this is how things are probably are for you now, if you have a button or any event source, you use listeners(Receivers) which monitors(Observes) for when the event happens, and execute (Update) whatever you intended. The terms in bracket are the alternatives Agera uses for handling event sources.

Events are typically an asynchronous stream on which you can observe and execute tasks based on it. But in react you can create streams not just from events like clicks or hovers they can be from variables, user inputs, api data — anything that has data.

Streams can be used as input to another stream, multiple streams can be merged into one, or filtered to get a particular stream or even map data values from one stream to another.

Streams are sequence of ongoing events ordered in time that is being observed. It can emit three different things: a value (of some type), an error, or a “completed” signal. We capture these emitted events only asynchronously, by defining a function that will execute when a value is emitted, another function when an error is emitted, and another function when ‘completed’ is emitted.

Why Agera?

Agera uses the well-known observer pattern as the driving mechanism behind its reactive programming paradigm. Observables take Updatables and signal change via update() calls. It is then the responsibility of those Updatables to figure out what changed. This is practically a zero argument reactive dataflow which relies on side-effects per update(). Agera uses fours interfaces at it’s foundation

But it’s most important concept is the Repository — Repositories receive, supply and store data and emit data. They foundation interfaces are combined into a Repository.

Repositories could either be:

Static repository supply the same value and don’t generate any events;
The mutable repository that allows changing its value and generates events whenever the value is being updated to a different one (according to Object.equals(Object)).

Hold on before you fall away with all the concepts, we’ll soon put it to practise. In this app we will be using a complex mutable repository to build a calculator app that can react to changes without any jankiness on the UI. It’s not called complex because it’s hard to implement but because it can react to other repositories (or observables, in general) and produce values by transforming data obtained from other data sources, synchronously or asynchronously.

Simple Calculator app with most of the concepts

You will need an have an introductory knowledge of lambdas to flow along with some part of this example.

First Steps — Add the dependency

// Agera depencies
compile 'com.google.android.agera:agera:1.3.0'

Enable Java 8 features on android

android {
  ...
  defaultConfig {
    ...
    jackOptions {
      enabled true
    }
  }
  compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
  }
}

Creating the UI

Link to github for UI code

We will need four Repositories on all the event sources and four Updatables

//    Repository for storing the first value to be calculated
private MutableRepository<Integer> mValue1Repo = Repositories.mutableRepository(0);
//    Repository for storing the second value to be calculated
private MutableRepository<Integer> mValue2Repo = Repositories.mutableRepository(0);
//    Repository for storing the result to be calculated
private Repository<Result<String>> mResultRepository;
// Repository for storing the operation to be performed
private MutableRepository<Result<Integer>> mOperationSelector =
        Repositories.mutableRepository(Result.absent());


// Updateables that will be called when the repository values //changes ie when an event has occured
private Updatable mValue1TVupdatable;
private Updatable mValue2TVupdatable;
private Updatable mResultUpdatable;

Setup the Radio Button to notify the repository that it has been clicked

// set the radio button to notify the repositories when changed
public void onRadioButtonClicked(View view) {
    mOperationSelector.accept(Result.present(view.getId()));
}

Setup event sources to work with our repository

// set the event sources to work with their repository
((SeekBar) findViewById(R.id.seekBar1)).setOnSeekBarChangeListener(
        new RepositorySeekBarListener(mValue1Repo));

((SeekBar) findViewById(R.id.seekBar2)).setOnSeekBarChangeListener(
        new RepositorySeekBarListener(mValue2Repo));

The result repository is a complex repository that observes other repositories so we take so extra care to make sure it works.

//the result repository is a complex repository so taking so extra care to make sure it works well
mResultRepository = Repositories.repositoryWithInitialValue(Result.<String>absent())
        .observe(mValue1Repo, mValue2Repo, mOperationSelector) 
// observes for when the repository changes
        .onUpdatesPerLoop()  
// updates after all tasks in the queue has been executed
        .goTo(CalculatorExecutor.EXECUTOR) 
// go to Executor for managing multiple threads
        .attemptTransform(CalculatorOperations::keepCpuBusy).orEnd(Result::failure) 
// data processing flow provides failure-aware directives that allow                                                                                               // terminating the flow in case of failure
        .getFrom(mValue1Repo)    
// obtain values for processing
        .mergeIn(mValue2Repo, Pair::create)  
// merge value from first and second repo and create a pair
        .attemptMergeIn(mOperationSelector, CalculatorOperations::attemptOperation)  
// try to perform calculator operation of add, subtract,                                                                                                       // multiply or divide
        .orEnd(Result::failure)
        .thenTransform(input -> Result.present(input.toString())) // transform calculated result to be presented
        .onConcurrentUpdate(RepositoryConfig.SEND_INTERRUPT)
        .compile();

Initialise the Update to update the textviews from values in the repository

// initialise the Updater to update the textviews from values from the repository always
mValue1TVupdatable = () -> ((TextView) findViewById(R.id.value1)).setText(
        mValue1Repo.get().toString());

mValue2TVupdatable = () -> ((TextView) findViewById(R.id.value2)).setText(
        mValue2Repo.get().toString());

// initialise the Updater for the resulttextview to check for errors and set textview correctly
TextView resultTextView = (TextView) findViewById(R.id.textViewResult);
mResultUpdatable = () -> mResultRepository
        .get()
        .ifFailedSendTo(t -> Toast.makeText(this, t.getLocalizedMessage(),
                Toast.LENGTH_SHORT).show())
        .ifFailedSendTo(t -> {
            if (t instanceof ArithmeticException) {
                resultTextView.setText("DIV#0");
            } else {
                resultTextView.setText("N/A");
            }
        })
        .ifSucceededSendTo(resultTextView::setText);

Register the repository in the onStart() method and calling update on the Updateables.

//add updateables to the repository
mValue1Repo.addUpdatable(mValue1TVupdatable);
mValue2Repo.addUpdatable(mValue2TVupdatable);
mResultRepository.addUpdatable(mResultUpdatable);

// call update on the when the event repository is observing for // // changes
mValue1TVupdatable.update();
mValue2TVupdatable.update();
mResultUpdatable.update();

Remove the Updateable in onStop()

mValue1Repo.removeUpdatable(mValue1TVupdatable);
mValue2Repo.removeUpdatable(mValue2TVupdatable);
mResultRepository.removeUpdatable(mResultUpdatable);

Now what ever happens to your event sources, you’ve correctly set up Agera repositories to react to it without any jankiness to the UI. You can even drag the two seekbars at the same time with no jank.

Get the complete code on github

Markdown Extra Components

2019-11-11T20:30:00+00:00

Summary:

You can pick as item to see how to apply in markdown.

External Elements

Gist
Codepen
Slideshare
Videos

Evidence

You can try the evidence!

Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.

<span class="evidence">Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.</span>

Side-by-side

Like the Medium component.

Image on the left and Text on the right:

<div class="side-by-side">
    <div class="toleft">
        <img class="image" src="http://ememakpanekpo.github.io/me/assets/images/profile.jpg" alt="Alt Text">
        <figcaption class="caption">Photo by John Doe</figcaption>
    </div>

    <div class="toright">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

Photo by John Doe

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Text on the left and Image on the right:

<div class="side-by-side">
    <div class="toleft">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div class="toright">
        <img class="image" src="http://ememakpanekpo.github.io/me/assets/images/profile.jpg" alt="Alt Text">
        <figcaption class="caption">Photo by John Doe</figcaption>
    </div>
</div>

Photo by John Doe

Star

You can give evidence to a post. Just add the tag to the markdown file.

star: true

Especial Breaker

You can add a especial hr to your text.

<div class="breaker"></div>

Spoiler

You can add an especial hidden content that appears on hover.

<div class="spoiler"><p>your content</p></div>

Gist

You can add Gists from github.

{ % gist sergiokopplin/91ff4220480727b47224245ee2e9c291 % }

Codepen

You can add Pens from Codepen.

<p data-height="268" data-theme-id="0" data-slug-hash="gfdDu" data-default-tab="result" data-user="chriscoyier" class='codepen'>
    See the Pen <a href='http://codepen.io/chriscoyier/pen/gfdDu/'>Crappy Recreation of the Book Cover of *The Flame Alphabet*</a> by Chris Coyier (<a href='http://codepen.io/chriscoyier'>@chriscoyier</a>) on <a href='http://codepen.io'>CodePen</a>.
</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

See the Pen Crappy Recreation of the Book Cover of *The Flame Alphabet* by Chris Coyier (@chriscoyier) on CodePen.

Slideshare

Add your presentations here!

<iframe src="//www.slideshare.net/slideshow/embed_code/key/hqDhSJoWkrHe7l" width="560" height="310" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>

Videos

Do you want some videos? Youtube, Vimeo or Vevo? Copy the embed code and paste on your post!

Example

<iframe width="560" height="310" src="https://www.youtube.com/embed/r7XhWUDj-Ts" frameborder="0" allowfullscreen></iframe>

Markdown Extra Components

2016-02-24T22:48:00+00:00

Summary:

You can pick as item to see how to apply in markdown.

Especial Elements

Evidence
Side-by-Side
Star
Especial Breaker
Spoiler

External Elements

Gist
Codepen
Slideshare
Videos

Evidence

You can try the evidence!

Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.

<span class="evidence">Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.</span>

Side-by-side

Like the Medium component.

Image on the left and Text on the right:

<div class="side-by-side">
    <div class="toleft">
        <img class="image" src="http://ememakpanekpo.github.io/me/assets/images/profile.jpg" alt="Alt Text">
        <figcaption class="caption">Photo by John Doe</figcaption>
    </div>

    <div class="toright">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

Photo by John Doe

Text on the left and Image on the right:

<div class="side-by-side">
    <div class="toleft">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div class="toright">
        <img class="image" src="http://ememakpanekpo.github.io/me/assets/images/profile.jpg" alt="Alt Text">
        <figcaption class="caption">Photo by John Doe</figcaption>
    </div>
</div>

Photo by John Doe

Star

You can give evidence to a post. Just add the tag to the markdown file.

star: true

Especial Breaker

You can add a especial hr to your text.

<div class="breaker"></div>

Spoiler

You can add an especial hidden content that appears on hover.

<div class="spoiler"><p>your content</p></div>

Gist

You can add Gists from github.

{ % gist sergiokopplin/91ff4220480727b47224245ee2e9c291 % }

Codepen

You can add Pens from Codepen.

<p data-height="268" data-theme-id="0" data-slug-hash="gfdDu" data-default-tab="result" data-user="chriscoyier" class='codepen'>
    See the Pen <a href='http://codepen.io/chriscoyier/pen/gfdDu/'>Crappy Recreation of the Book Cover of *The Flame Alphabet*</a> by Chris Coyier (<a href='http://codepen.io/chriscoyier'>@chriscoyier</a>) on <a href='http://codepen.io'>CodePen</a>.
</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

See the Pen Crappy Recreation of the Book Cover of *The Flame Alphabet* by Chris Coyier (@chriscoyier) on CodePen.

Slideshare

Add your presentations here!

<iframe src="//www.slideshare.net/slideshow/embed_code/key/hqDhSJoWkrHe7l" width="560" height="310" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>

Videos

Do you want some videos? Youtube, Vimeo or Vevo? Copy the embed code and paste on your post!

Example

<iframe width="560" height="310" src="https://www.youtube.com/embed/r7XhWUDj-Ts" frameborder="0" allowfullscreen></iframe>

:ramen: Indigo, minimalist jekyll theme

2016-01-23T22:10:00+00:00

Example of project - Indigo Minimalist Jekyll Template - Demo. This is a simple and minimalist template for Jekyll for those who likes to eat noodles.

What has inside?

Gulp
BrowserSync
Stylus
SVG
Travis
No JS
98/100

Check it out here. If you need some help, just tell me.