DEV Community: Filip Němeček

I re-built the Instagram profile detail Compositional Layout and Diffable to help folks learn

Filip Němeček — Mon, 18 Jan 2021 19:02:58 +0000

As an iOS developer I am very excited about relatively new technologies Compositional Layout and Diffable Data Sources. Thanks to these building UI similar to App Store or Netflix became way easier and less error prone.

I have previously written about these technologies in more an abstract way, focusing on the principles and how to use them.

Now I decided to try something very different and "re-built" the Instagram profile page.

My goal is to show newcomers to iOS development how to approach such task and how to step-by-step build the entire UI.

Here is the result side-by-side 😄

I have written detailed post and the entire code is available on GitHub. Check it out!

Feel free to ask me any questions 🙂

Learn compositional collection view layout and diffable data source with example code

Filip Němeček — Thu, 19 Nov 2020 17:51:17 +0000

Compositional collection view layouts and diffable data sources are great UIKit additions available for iOS 13 and up. They greatly simplify building collection views (especially those with complicated layout) and populating those collections views with data.

No longer it is needed to manually specify the number of sections and rows and to keep the collection view correctly updated. These new APIs will do much of the hard work for you.
I wanted to get a better grasp on compositional collection views and diffable data sources so I created public repository to share my experiments.

So far I have one main screen with fairly complicated layout. Multiple sections where some are horizontal and items are responsive to fill the width along with screens dedicated for specifics layouts. For example list layout, grid layout with option to change grid cell size and see them animate or lazy loaded grid which is ideal when you need to implement paging of results from API.

I am by no means an expert so please take this code and examples more like a suggestion and inspiration than best practices.

Do you have layout you want to see? Let me know and I can try to implement it.

The project is available on GitHub.

How to use Core Data with Diffable Data Source - a minimal example

Filip Němeček — Mon, 28 Sep 2020 19:44:03 +0000

If you have been developing iOS apps for some time, setting up Table Views and Collection Views is likely muscle memory. You prepare the UI component, set datasource and delegate and then implement methods that tell said component how many sections and rows in each section to accept. The last needed step is to configure cell for each row.

Using this old setup with Core Data means in most cases NSFetchedResultsController and implementation of its delegate which tells you when data content changed and you need to update the Table/Collection View accordingly.

Diffable Data Sources make this much easier. But also the process is totally different and can be a bit hard to get used to.

I am writing this short example for myself and other to speed up setting up Diffable in new projects with Core Data. The result is three shorter methods that make the initial collection view work.

I am using UICollectionView in this example, but UITableView is basically identical.

Note: In your project substitute Model class from my example with your own Core Data entity.

Let's start with declaring properties:

var datasource: UICollectionViewDiffableDataSource<Int, Model>!
var fetchedResultsController: NSFetchedResultsController<Model>!

Note: For UITableView you would use UITableViewDiffableDataSource. The Int is used because this requires type for section. If you have just one you can use Int, String and then pass either "0" or empty string.

Configuring UICollectionViewDiffableDataSource

Next we configure the datasource like so:

func configureDatasource() {
        datasource = UICollectionViewDiffableDataSource(collectionView: collectionView, cellProvider: { (collectionView, indexPath, scan) -> UICollectionViewCell? in
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ModelCell", for: indexPath) as! ModelCell
            cell.configure(with: model)
            return cell
        })
}

All we need to do is to create an instance of UICollectionViewDiffableDataSource. We give it our collectionView and configure cellProvider which is modern version of the old cellForRowAt method.

This could be separate method we could pass in. Since this is an example and I have just a single I am using inline version.

NSFetchedResultsController

Time to configure the NSFetchedResultsController:

func initFetchedResultsController() {
        fetchedResultsController = NSFetchedResultsController(fetchRequest: Model.sortedFetchRequest, managedObjectContext: Database.shared.context, sectionNameKeyPath: nil, cacheName: nil)
        fetchedResultsController.delegate = self
        try! fetchedResultsController.performFetch()
}

Animating changes

And almost as a last step we need to implement a method that will update our collectionView when data changes:

func controller(_ controller: NSFetchedResultsController<NSFetchRequestResult>, didChangeContentWith snapshot: NSDiffableDataSourceSnapshotReference) {
        var diffableDataSourceSnapshot = NSDiffableDataSourceSnapshot<Int, Model>()
        diffableDataSourceSnapshot.appendSections([0])
        diffableDataSourceSnapshot.appendItems(fetchedResultsController.fetchedObjects ?? [])
        datasource?.apply(diffableDataSourceSnapshot, animatingDifferences: view.window != nil)
}

And lastly we need to call these methods in viewDidLoad:

override func viewDidLoad() {
        super.viewDidLoad()
        configureDatasource()
        initFetchedResultsController()
}

Of course this solution is not perfect and is not meant to be. My goal was to show simplest working example to get started which you can tweak to your liking.

I write about iOS/Swift here and on my blog nemecek.be

How to select random record with Django ORM

Filip Němeček — Mon, 28 Sep 2020 19:38:46 +0000

Recently I wanted to implement more sophisticated banners on my site to promote my iOS apps. Initially I had just one hardcoded banner in the template but that was not going to work for multiple banners.

The part that took the longest was to display random banner on a page. This involves mainly getting random record (or entity if you will) from your database. I have found quite a few solutions but they were either too complicated or relied on some preconditions like you had to have a table with no deleted records + sequential ids and then you could use something like last id or count and select random number from that.

My solution does not have any requirements but could be problematic if you needed to select from possibly 100s of thousands or more records.

Anyway, let's move to code. My Banners can be toggled off with property is_active so I am using Django ORM filter together with values to pull out all the available ids. Like this:

banner_ids = Banner.objects.filter(is_active=True).values('id')

Once that is done, we can check if the result is not empty and if not, utilize choice form random module to pick random element.

import random

if len(banner_ids) > 0:
    random_id = random.choice(banner_ids)["id"]

    try:
        banner = Banner.objects.get(pk=random_id)
    except Banner.DoesNotExist:
        banner = None

Because the banners_ids is basically "array" of key-value pairs, there is ["id"] subscript to pull out just the number. Once we have random id, we can use that to try to get record with the get method.

And that is all!

I think this is pretty good for my usecase and for many other assuming you don't have tons of data to work with.

I have a few banners and the pages are cached so I don't almost have to even think about performance.

I write about Django here and on my blog nemecek.be

Fresh app ideas for iOS 14

Filip Němeček — Tue, 21 Jul 2020 09:38:21 +0000

The next iteration of Apple's mobile operating system brings with it a ton of great new frameworks and APIs to build new kinds of apps. New advances include the Vision framework that can now track human body movement and developers can also utilize the NearbyInteraction framework with the U1 chip available in the new phones.

Exercise coach app

With the new Vision APIs that precisely track human body movement it makes sense to utilize this for a fitness app. The vision could be used to automatically track reps or warn when the user has incorrect posture. This could be especially useful for newcomers to yoga.

Pair this witch speech synthesis and you can create fully automatic exercise coach. Then use HealthKit framework to record activity data.
Check these WWDC 20 session for more information and inspiration: Build an Action Classifier with Create ML, Detect Body and Hand Pose with Vision & Explore the Action & Vision app.

Sample code is available to get you up to speed quickly.

Friend finder for busy places

Ever spent too much time finding a friend in a huge crowd? With iOS 14 and the new NearbyInteraction framework this problem could be solved with the powerful U1 chip in new iPhones.

Once you establish session between two devices you get precise distance and direction information. You can use this to guide the user via arrow to their friend and save a lot of frustration.

The session needs to be initialized before you can use the U1 chip so you could try creating a simple iMessage app or possibly your own server do facilitate this initial connections.

Check out the session Meet Nearby Interaction.

You can find even more ideas in my GitHub repo! Stars appreacited 🙂

How to create RSS feed with HTML content in Django

Filip Němeček — Sat, 04 Jul 2020 09:59:53 +0000

I am not feeling super comfortable writing this blog post because I don't know much about setting up a RSS feed with Django and including HTML in the content but when I was trying to do this for my own blog I could not find any up-to-date tutorial showing how to properly include HTML content.

I had various issues regarding encoding of the HTML entities so my content was full of stuff like this:

&lt;p&gt;Hello&lt;/p&gt;

And when I finally solved this issue I noticed that RSS readers would display the HTML in an "not-rendered" form so readers would see something like this:

<p>Hello <span class="code">World!</span></p>

Instead of properly formatted text based on the HTML provided.

As of right now my RSS feed should be working pretty ok and I hope this little guide will save someone a bit of time when creating their own RSS feed with HTML content and fighting the escaping.

Django has pretty good docs about RSS which will get you started with creating the basic structure, setting up urls etc. But there is very little about providing your custom template and using HTML.

Below is shortened example of my feed:

class BlogPostsFeed(Feed):
    title = "Filip Němeček Blog"
    link = "https://nemecek.be/blog/swift-and-ios"

    description_template = 'rss_feed.html'

The most important part there is the description_template which tells Django where to find template file for individual RSS entries. The alternative is the item_description method but I had zero luck using it with HTML. It works fine if you have plain content and can just pass it along.

And finally let's have a look at my rss_feed.html template file:

{% autoescape off %}
<![CDATA[
{{ obj.title }}

{{ obj.html_content|safe }}
]]
{% endautoescape %}

I am pretty sure this is not the best solution out there but it works fine for me and I have a RSS feed with proper HTML rendering.

The <!CDATA[ wrapper is very important for RSS to display your HTML. But of course it was getting escaped so I turned escaping. The obj is the item automatically passed into the template by Django.

So in my case this is my blog post which has among other stuff a title and html_content attributes.

Please let me know if you have any questions or improvements regarding creating RSS feeds with Django.

Btw there is handy website to test your RSS feed.

iOS 14: What is new for WKWebView

Filip Němeček — Fri, 03 Jul 2020 19:13:45 +0000

In this post let's go over some of the interesting changes for WKWebView in iOS 14.

Sandboxing for JavaScript

There is new WKContentWorld type to represent the separation of website's JavaScript and JavaScript that developers inject into the page. They can now run in completely separate environments.

That means mainly that you don't have to worry about accidentally interacting with some website JS code and vice versa. So no naming clashes and also protections from malicious websites that may try to influence the app via JS communication.

There are two content worlds defined and these are page for the website environment and defaultClient which should be the first choice when injecting JS into the page.

WKContentWorld is a new parameter in methods like evaluateJavaScript or callAsyncJavaScript which we look at later in this post. This also applies to the WKUserContentController which allows you to send data from JavaScript to your app. This can now be associated with content world. So for example you have multiple instances and each within its own content world to prevent interference.

Better JavaScript evaluation with `callAsyncJavaScript`

This new method will likely be the most used way for running JS code in WKWebView. Mainly for two reasons. You can pass arguments parameter which is a [String: Any] dictionary and will be mapped to JS types. So you don't have to include those in the JavaScript string and can reuse it with different arguments.

What does the "async" in the method name means? It is an indication that this method can handle JS promises which are one of the option how JS handles asynchronous code. If your JS code returns promise then the completionHandler of this method will not be called immediately and somehow return this promise but it will wait and you will get the value. This means callAsyncJavaScript can be trivially used with fetch to download any kind of data and then access it in Swift code.

`findString`

As the name implies this method will let us find text in a webpage. You can do a bit of configuration or just use defaults that should work pretty well. The result is then selected and WKWebView automatically scrolls so the result is visible.

Create PDF from page

Since iOS 11 we can take a snapshot of currently visible part of the page with the createPDF page which also lets us to configure the result we want.

`pageZoom`

We can now easily zoom pages with this new property so we don't have rely on JavaScript to change the CSS to control zoom.

This was just a sort of high-level overview. For more watch the Discover WKWebView enhancements session.

Note: Not all the new stuff is available in Xcode 12 Beta 1.

Checking out the new PHPickerViewController in iOS 14

Filip Němeček — Thu, 25 Jun 2020 13:04:48 +0000

In iOS 14 there is a brand new way to let users select a photo(s) or video(s) from their library to use in your app and it has some cool features and benefits. Let's see what these are and how basic PHPickerViewController usage looks like.

Benefits

No permissions required - you don't need to provide usage description in Info.plist to present the new picker and system does not show the allow access dialog. That is because users have full control over what media they select and subsequently send to your app.

Modern UI consistent with Photos - the new picker is much easier to use because the UI is very similar to what you get in Photos and there is also a search. This should be much better selection experience for the users than with the UIImagePickerViewController

Multi-selection - what else to say? 🙂

Usage overview

Using the new PHPickerViewController is pretty straightforward. It uses the traditional delegate model that will alert you when user finishes her selection. There is just a single delegate method to support and a bit of configuration.

Start by importing the PhotosUI framework:

import PhotosUI

Then continue with creating the configuration object PHPickerConfiguration. So far this allows to customize how many media files user can select and what kind of:

var configuration = PHPickerConfiguration()
configuration.selectionLimit = 3
configuration.filter = .images

In this example we are setting the selectionLimit to 3 (default is 1). You can also set 0 to mean unlimited. And next with filter we are saying that we want just images.

You can also ask for videos or livePhotos and combine these with the any(of: method like so:

configuration.filter = .any(of: [.livePhotos, .images])

Next create the picker itself and set yourself as its delegate:

let picker = PHPickerViewController(configuration: configuration)
picker.delegate = self

We have two things left. Present the picker:

present(picker, animated: true, completion: nil)

The UI is different depending if multi-selection is enabled or not.

And implement the delegate:

extension ViewController: PHPickerViewControllerDelegate {
func picker(_ picker: PHPickerViewController, didFinishPicking results: [PHPickerResult]) {
        dismiss(animated: true, completion: nil)
        guard !results.isEmpty else { return }
     }
}

So far we are just dismissing the picker and checking that we have results.
Unlike with UIImagePickerViewController we won't get the URL path to the file but instead a NSItemProvider that we can ask to load a specific object. For images this may look like this:

if provider.canLoadObject(ofClass: UIImage.self) {
     provider.loadObject(ofClass: UIImage.self) { (image, error) in
             DispatchQueue.main.async {
                 if let image = image as? UIImage {
                      self.imageView.image = image
                 }
             }
    }
 }

Just to be safe we first ask if the object can be loaded and then load it. To be honest I am not that well versed with NSItemProvider.

With UIImagePickerViewController there was a settings to specify the resolution for exported media which here does not appear to be a case. I plan to investigate this further and either update this post or write new one detailing how to get video or image with specific resolution.

In the WWDC 20 session about this new photo picker Apple specifically mentions that we should be using this new one instead of the older UIImagePickerViewController. This is not deprecated yet but presets for image/video quality are as per new documentation:

First look at the new UIColorPickerViewController in iOS 14

Filip Němeček — Tue, 23 Jun 2020 13:57:18 +0000

With iOS 14 we can use the new UIColorPickerViewController to let user select color. In this post let's briefly check how to use it. You of course need the new Xcode 12 to be able to try this example.

Showing the color picker

The new UIColorPickerViewController works basically in the same way like other pickers and pre-made controllers. We create an instance, set ourselves as a delegate and present the picker like so:

let picker = UIColorPickerViewController()
picker.delegate = self
present(picker, animated: true, completion: nil)

Note that you should not wrap the picker in UINavigationController I tried it and got very strange behaviour with missing background. Also since the picker has its own navbar I think that is the indication it should not be used with UINavigationController.

Once you present the controller, you get UI like this:

There are three ways how to pick a color with the option to also select opacity. This can be customized with the supportsAlpha property. If set to false you cannot change opacity and cannot select color with alpha component. So far that is the only customization we have.

Implementing the delegate

To get notified about user's color selection we need to implement the UIColorPickerViewControllerDelegate. These are two methods. One informs us about new color selection and the other about user closing the picker.

The basic implementation could look like this:

func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
        dismiss(animated: true, completion: nil)
}

func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
        let color = viewController.selectedColor

}

And that is our first look at UIColorPickerViewController.

iOS: How to save event into user's calendar

Filip Němeček — Sat, 20 Jun 2020 15:52:21 +0000

In this post we will use the EventKit framework to save event into user's default calendar.

If your app deals with some kind of events you can make it easy for the user to save particular events into their calendar. This way they won't have to remember be and can plan accordingly.

Working with calendars in iOS is pretty good thanks to the EventKit framework. In this post we will focus on the minimal example to save an event into user's calendar.

As with other private stuff, the first step is to configure Info.plist and then requesting access.

To save an event you need to add the key NSCalendarsUsageDescription to Info.plist with explanation why you need calendar access.

Once that is done we can move to Swift code and start by importing EventKit and also creating an instance of EKEventStore which is used to manage events.

import EventKit

let eventStore = EKEventStore()

Once eventStore is created, we can move to requesting access to the calendar.

func requestAccess() {
        eventStore.requestAccess(to: .event) { (granted, error) in
            if granted {
                // save event
            }
        }
}

I would recommend checking access often because user can change their mind and remove access in Settings.

If access was granted we can save the event. In case of touching UI somehow we would need DispatchQueue.main.async to make sure we are on the main thread.

The eventStore has property defaultCalendarForNewEvents we can use to get user's default calendar. This is quite sensible default for new events and we don't need to prompt the user to choose calendar.

However in the real app it would be a good idea to have some sort of fallback. At least showing an alert explaining that there is not a default calendar or better using EKCalendarChooser to let user select an alternative. I have a post about it also.

Assuming we have a calendar, we can create an event using our eventStore:

guard let calendar = eventStore.defaultCalendarForNewEvents else { return }       
let event = EKEvent(eventStore: eventStore)

Saving an event is done via EKEventStore so we need to associate it.

Next step is to configure the EKEvent with data:

event.title = "This is my test event"
event.startDate = Calendar.current.date(byAdding: .day, value: 1, to: Date())!
event.isAllDay = true
event.endDate = event.startDate

Note that the endDate is required even when you want event for just one day. Without it you will get an error trying to save.

Next we assign the calendar:

event.calendar = calendar

And lastly we save the event:

try eventStore.save(event, span: .thisEvent, commit: true)

The span argument is required even though it does not really make sense for non-recurring events. commit means that the event will get saved immediately.

Alternative would be to commit later via dedicated method. This is useful when you are saving multiple events:

try eventStore.save(event, span: .thisEvent)
try eventStore.commit()

And done! If you run the above code, check your calendar for new event 🙂

If you are interested in more EventKit you can check my other posts or open-source project showcasing working with different parts of the framework.

iOS: How to let user select video from their library

Filip Němeček — Fri, 19 Jun 2020 14:16:44 +0000

Despite its name UIImagePickerController can be also used to let user select video to import it to your app. It requires just a bit of configuration of the picker.

I am going to split the creation and configuration into multiple parts for clarity.

First we create the instance and assign self as a delegate which will let us dismiss the picker once selection is done and access the video.

let picker = UIImagePickerController()
picker.delegate = self

The delegate requires conformance to UIImagePickerControllerDelegate and UINavigationControllerDelegate. We will implement those methods later.

Media types configuration

Next we need to tell the picker what media types are we interested in and where it should look for them:

picker.sourceType = .photoLibrary
picker.mediaTypes = UIImagePickerController.availableMediaTypes(for: .photoLibrary) ?? []
picker.mediaTypes = ["public.movie"]

There is ?? [] fallback because the UIImagePickerController.availableMediaTypes method returns optional string array. You may consider adding assert below to check we got mediaTypes just to avoid surprises in the future.

Resolution configuration

And now we specify the quality and resolution because the picker does video compression:

picker.videoQuality = .typeHigh
picker.videoExportPreset = AVAssetExportPresetHEVC1920x1080

If you specify lower videoQuality then during the compression it will take that into an account. The videoExportPreset is super important because otherwise we would get 720p video.

The available presets are listed in the documentation.

For 4K we would use AVAssetExportPresetHEVC3840x2160 or possibly AVAssetExportPresetHEVCHighestQuality.

And that is basic configuration done.

It may be a good idea to allow editing with this parameter:

picker.allowsEditing = true

Now we just need to present the picker:

present(picker, animated: true, completion: nil)

The delegate methods

Let's start with the easier method:

func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
        dismiss(animated: true, completion: nil)
}

This is called when user cancels the selection, so we dismiss the picker.

When user selects video, we get this callback:

func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
        dismiss(animated: true, completion: nil)
        guard let movieUrl = info[.mediaURL] as? URL else { return }

        // work with the video URL
}

Once again we dismiss and then attempt to get video URL from the info dictionary provided.

It is a good idea to copy the video somewhere else and not hold onto the original URL.

And that is basic usage of UIImagePickerController to get video from user's library in Full HD or even 4K if we want to.

Thanks for reading!

Django: Add tweet button with plain HTML/CSS, no JavaScript

Filip Němeček — Wed, 17 Jun 2020 17:34:35 +0000

Do you want to have "Tweet" button on your personal site without the need to use Twitter JavaScript library? You can, and it only takes a bit of code. Twitter supports special "intent" url which can be configured to pre-populate new tweet on Twitter.com.

In this post I will show you how I integrated this into my site to give the readers option to quickly tweet my posts if they choose. I am so far not using any JavaScript because I don't need it and I didn't want to change this just for Twitter.

Let's get started.

The first step is to prepare the url in Django and send it to template where it can be rendered inside a tag.
I have created this handy helper method:

def get_tweet_intent(post: BlogPost):
    url = urllib.parse.quote('https://nemecek.be{0}'.format(post.get_absolute_url()))
    text = urllib.parse.quote_plus(post.title)
    tweet_intent = "https://twitter.com/intent/tweet?text={0}&url={1}&via=nemecek_f&hashtags={2}".format(text, url,
                                                                                                         post.category.hashtags)
    return tweet_intent

It expects instance of BlogPost which is my model class for posts and returns tweet_intent as a string.

I am using the urlib.parse.quote method to correctly encode the url and also the quote_plus variant to encode title. The difference is that the "plus" version also encodes spaces.

Then it is just a matter of constructing the url.

The format is this:

"https://twitter.com/intent/tweet?text={tweet text}&url={url to link to}&via={ username or user id}&hashtags={ hashtags separated by comas}"

You can also check out the official docs.

Once you send it to the template as tweet_intent or anything else you want, you can create the element:

<a class="tweet-button" href="{{ tweet_intent }}" target="_blank">Tweet</a>

And possibly some styles 🙂

.tweet-button {
    float: right;
    padding: 5px 20px;
    background-color: #1DA1F2;
    color: white;
    border-radius: 5px;
}

The background color is the "Twitter blue".

And that is how you can create Tweet button with Django, HTML and CSS.