struct ContentView: View {
    @Environment(\.colorScheme) var colorScheme

    var body: some View {
        Text("Hello World")
            .backgroundColor(colorScheme == .dark ? Color.black : Color.white)
    }
}

Sometimes, if for other case, where I am not using SwiftUI but I need to know if dark mode is active or not there is another solution.

So I created a static function in Utilities.swift file where I defined this method. If you pass the colorScheme it will use that to verify what mode is active. Otherwise, it will check UITraitCollection.current.userInterfaceStyle to detect color mode.

static func isDarkMode(_ colorScheme: ColorScheme? = nil) -> Bool {
        if let colorScheme = colorScheme {
            return colorScheme == .dark ? true : false
        }
        
        return UITraitCollection.current.userInterfaceStyle == .dark ? true : false
}

But if you use asset catalog, where you have different color and image for dark mode and light mode, that will be automatically reloaded if color scheme changed.

By profession, I am a software engineer and currently working for a company located in the United States, and I work remotely from Malaysia. By the way, I am not Malaysian, I am a Bangladeshi citizen.

So in the last 2 years, I gained some knowledge about my youtube channel and I think my knowledge will help you if you want to start or have a youtube channel for your own.

Here is a little background. I started my youtube channel from some curiosity. Initially I used my native Bangla spoken language to create videos, especially programming tutorials. After 1 year, I only publish English videos. There are some reasons, but let keep aside that in this video.

Let me share with you some analytics.

Around 38.9% of my videos consumed by people living in Bangladesh. 15% consumed in India and 4.7% consumed in the United States. These 3 countries are at the top 3 positions.

Now let me show you the yearly revenue.

My channel is not popular at all. But it still generates some revenue. Surprisingly, I earn most of my revenue from the United States. It is 37.5%. And though most of the views consumed in Bangladesh from there I earn only 7.5% and from India I earn 9.4% of my revenue.

So the lesson, I learned from here and you should keep a note about this is that,

It doesn’t matter how much views are consumed. The thing that matters most is that from which geography location your videos are more consumed. If it is the United States or maybe the UK, Canada, or Australia you will earn more.

Now let me show you another analytics.

My channel has over 11K subscribers. But if you see the watch time from subscribers, you will see only 18.9% of my channel subscribers watch my videos. Over 81% of watch time coming from non-subscribers.

So the lesson I learned from here:

If you publish random videos but within a niche like I usually publish programming related videos, it doesn’t matter how many subscribers you have. But the thing that matters most is, whether your videos are recommended by a search engine like Google or Youtube and if people are coming from there.

Now let me tell you why having a youtube channel is good for you:

1. You can learn how to express your message
2. If English is not your mother tongue like me, on the way you will improve your spoken English as well.
3. You will also improve your knowledge by teaching others no matter what it is
4. Even something may look silly to you but which may help other people. For example, I noticed how to install pipenv in mac and windows also watched by some people

Lastly, I want to tell you why English matters.
If you want to be a programmer, but if it is tough for you to learn anything in English and you also want to work for foreign companies remotely or want to do freelance works, then it will be difficult for you if your English is not good.

Most of the English teachers say,

Think in English.

No matter what you do, if you can’t think in English, your English will not improve. Normally what we do, we translate the English words into our mother tongue and then try to understand which is slower to communicate.

So if you publish English videos, your spoken English will improve.

And don’t afraid about the mistakes or the hate comments.

According to Jim Kwik in his latest book “Limitless“ he says,

“No matter what you do, people will judge you, some people will hate you and some will criticize you. If you don’t take someone’s opinion for your life, then don’t take criticism from that person unless it is constructive criticism. Don’t run or ruin your life based on other people’s opinions.”

Even, surprisingly I found some people write hate comments to native English people’s videos like their English or voice are not good. So don’t take this as a barrier to your progress.

So thank you for reading, and keep improving!

URL: https://github.com/bradtraversy/design-resources-for-developers

In this repo you will see the following list of contents:
1. UI Graphics
2. Fonts
3. Colors
4. Icons
5. Stock Photos
6. CSS Frameworks
7. React UI Libraries
and many more.

If you scroll the page you will see the main contents divided by many sub contents. This Github repo contains so many things, even I haven’t explored everything. So what I suggest you take some time and at least skim the page, open some links to understand what kind of contents you may get from this page.

UIDesignDaily
For example, I found UIDesignDaily is a fantastic page. You will see, beautiful small components design here. If you click detail of any components, you can get the color, source file to use for your own projects.

Humaaans:
If you ever need to portray humans on your webpage or mobile app UI, you can visit https://www.humaaans.com/ website wherein the URL there are 3 a’s, also you can download the library from here. You can modify parts of the human to suit your purpose only. Amazing!

Drawkit.io
Another website named Drawkit.io from there you can get free beautiful illustrations. You can use any of these for your project without paying a single penny.

Undraw.co
Another one which I liked very much is undraw.co. Here you can get small UI widgets, which you can use in both mobile applications or web applications. If you are developing a new app or webpage it helps to express your project concept in a single widget.

Illustration.co
is another open-source design site where you can get many beautiful illustrations.

InvisionApp
is also a library of free, high-quality UI kits, icon packs, and mockups. So you should check them out.

Animations.co
If you need beautiful gif animations, you can try this website. Here some are free, and some cost a very little amount of money. But it worth it if you need animation for your app or webpage.

Fonts:
Normally for fonts, I mostly use Google Fonts. But if you want to try some other beautiful fonts, you can try the list here.

Colors:
Everyone needs color. There are many color generated sites listed in here. Normally you can try any of these. If you are designing iOS application, you can try a flat color from the following site FlatUIColors https://flatuicolors.com/

Normally my favorite one is https://colorhunt.co/. The good thing is here, a collection of color combined as a palette, and there are many pallets. So when I design any application, I try to choose a palette and use the colors listed in there to create my design. In that case, I don’t have to worry about individual color for my design.

There are many other color-related sites are listed, so you can check if any of them is helpful for you or not.

Icons:
Normally when I design an iOS app, I use Apple’s new SF Symbol application to get common icons. For Android, Google also has a material icon set https://material.io/resources/icons/?style=baseline, which you can use in your android or flutter apps.

If you need more than this, you can try any icon related site from here. A few years ago, when I have created an iOS game, I use IconFinder website to purchase icons. If you need any special type of icons you can try as well.

Photos:
If you need free photos, nowadays there are many websites that supply free stock photos. You can try pexels and Unsplash . Both of them are very popular. Ther are other sites you can also try and use the photos for your youtube videos, websites, or mobile applications.

There are many other things listed here, you can try.

Lastly, I want to talk about React UI. Last year, I worked in a company, where we were mostly used React Semantic UI library to create our dashboard user interface.

There are other React libraries as well like Material UI

or React Bootstrap. So you can easily import any of these libraries to create beautiful react UI based web applications.

So anyway, this is a very long list of collections. So it’s worth to bookmark this repo and when you do any design related work, you just visit the repo and check related sites for further information.

Thank you for reading and keep learning!

1. Flutter and SwiftUI both are declarative UI framework. So you can create composable components which in Flutter are called widgets and in SwiftUI called views.

2. In Flutter, if we want to show widgets vertically and horizontally we can use Column and Row widgets. Similarly in SwiftUI, we can use VStack and HStack layout views for the same purpose.

3. In Flutter, everything is a widget. So suppose if you want to create a Text widget and you want to give some styles on that text, you have to use another widget that is called TextStyle() and you have to assign that widget with the parameter of the Text widget.

4. But in SwiftUI, not everything is View. There are 2 concepts, Views, and Modifiers. So you can create a View like Text() view, and if you want to apply some styles like fonts, colors you have to use modifiers for that. So basically, modifiers are methods that take the view, modify the view, and return a new view object.

5. In Flutter, there are fundamentally 2 types of widgets. Stateless widget and Stateful widget. If you want to store a local state, you have to use a Stateful widget. But in SwiftUI, there is no such difference. You can add local state to any views, and even you can bind that state to subviews.

6. For global or app state management, in Flutter there are different choices. You can use Provider, Redux, BloC. All of these are 3rd party libraries. So that means you have to install any of these libraries before you want to use them.

7. But in SwiftUI, you can create an app state or global app state using built-in libraries. You can create, EnvironmentObject and assign that in the master view so that any child view of the master view can access that state. Or if you want to create an external state that you want to use in a few views you can do that by creating and using ObservableObject. So all of these are built-in options.

So if you know Flutter, you can also apply some of your knowledge in SwiftUI and vice versa.

So if you ask me, which one should I learn. It depends on:
1. Career / Jobs Perspective
2. Personal Choice
3. and most importantly project Requirements

If a project focuses mostly on iOS users or users from the Apple ecosystem including Mac, Apple Watch, iPad, Apple TV. I will select SwiftUI to build the app.

If the major portion of an app depends on 3rd party frameworks like facebook which provides native SDK, then I will select SwiftUI to build my app.

If I want to work for big companies then I will select SwfitUI or native iOS development. Because big companies will not want to depend on another company like Google to develop their apps. Apple regularly updates its SDK with new bug fixes, new features so it is really easy to upgrade the native iOS app. But if you use Flutter, you have to wait until Google implements that.

I will choose Flutter if I want to develop mostly REST API or service-based mobile apps and my target audience including both iOS and Android users. And for some companies, if they have not a big budget for their mobile apps they may hire me as a Flutter developer.

And the last question is can I learn both:

Technically yes, you can learn both and you can apply some common patterns to solve common problems using both frameworks. The only barrier is that you have to excel in both Swift and Dart programming languages. As these 2 languages are strongly typed languages, so it is also not a big issue. In most cases, a developer has to work on multiple programming languages.

Thank you for reading!

[UIView beginAnimation] are deprecated used block based animation

So my existing code was like:

[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.1];
[UIView setAnimationDelegate:itemView.superview];
[UIView setAnimationDidStopSelector:@selector(removeFromSuperview)];
[self performSelector:@selector(queueItemView:) withObject:itemView afterDelay:0.1];
itemView.superview.layer.opacity = 0.0f;
[UIView commitAnimations];

So to fix this the equivalent block based solution is like:

[UIView animateWithDuration:0.1f animations:^{
            [self performSelector:@selector(queueItemView:) withObject:itemView afterDelay:0.1];
            itemView.superview.layer.opacity = 0.0f;
        } completion:^(BOOL finished) {
            [itemView.superview removeFromSuperview];
        } ];

So basically you have to use:

[UIView animateWithDuration

Hope it helps.

In my last blog post, I discussed how to do that by using only navigation view. But the solution doesn’t work, when I use Tab View as the root view. So in this tutorial, I want to show you how to do that with a Tab View and Navigation View.

Github Code: https://git.io/JvjCj

Step 1:

This is the code for ContentView.swift

import SwiftUI

struct ContentView: View {
    @EnvironmentObject var appState: AppState
    
    var body: some View {
        NavigationView {
            VStack {
                // TabView1()
                tabsView
            }
        }
    }
    
    var tabsView: some View {
        TabView {
            TabView1()
            .tabItem({
                Image(systemName: "flame")
                Text("Fire")
            }).tag(1)
            
            TabView2()
                .tabItem({
                    Image(systemName: "umbrella")
                    Text("Rain")
                }).tag(2)
        }
    }
}

// MARK:- Tab View 1
struct TabView1: View {
    @EnvironmentObject var appState: AppState
    @State var isView1Active: Bool = false
    
    var body: some View {
        VStack {
            Text("Tab View 1")
                .font(.headline)
            NavigationLink(destination: View1(), isActive: $isView1Active) {
                Text("View 1")
                    .font(.headline)
            }
            .isDetailLink(false)
        }
    }
}

// MARK:- Tab View 2
struct TabView2: View {
    
    var body: some View {
        VStack {
            Text("Tab View 2")
                .font(.headline)
        }
    }
}

// MARK:- View 1
struct View1: View {
    var body: some View {
        VStack {
            Text("View 1")
                .font(.headline)
            NavigationLink(destination: View2()) {
                Text("View 2")
                    .font(.headline)
            }
        }
    }
}

// MARK:- View 2
struct View2: View {
    @EnvironmentObject var appState: AppState
    
    var body: some View {
        VStack {
            Text("View 2")
                .font(.headline)
            Button(action: {
                // FIXME:- add move to dashboard functionality
                
            }) {
                Text("Move to Dashboard")
                .font(.headline)
            }
        }
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

In the View2 view, there is a button with // FIXME:- add move to dashboard functionality comment. We have to add the code in here.

Step 2:

Create an AppState.swift file in the project and write the following code.

import SwiftUI
import Combine

class AppState: ObservableObject {
    func reloadDashboard() {
        (UIApplication.shared.connectedScenes.first?.delegate as? SceneDelegate)?.reloadDashboard()
    }
}

This reloadDashboard() function in the SceneDelegate yet not defined. We will do that in the next step.

Step 3:

Update the SceneDelegate file

    var window: UIWindow?
    var contentView: ContentView?
    var appState: AppState?

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        if let windowScene = scene as? UIWindowScene {
            let window = UIWindow(windowScene: windowScene)
            self.window = window
            reloadDashboard()
        }
    }

    func reloadDashboard() {
        if let window = self.window {
            window.rootViewController = UIHostingController(rootView:
                contentView
                    .environmentObject(appState!)
            )
            window.makeKeyAndVisible()
        }
    }

Step 4:

Update the ContentView.swift file’s View2 view and adds this line of code self.appState.reloadDashboard() within the button’s action.

// MARK:- View 2
struct View2: View {
    @EnvironmentObject var appState: AppState
    
    var body: some View {
        VStack {
            Text("View 2")
                .font(.headline)
            Button(action: {
                // FIXME:- add move to dashboard functionality
                self.appState.reloadDashboard()
            }) {
                Text("Move to Dashboard")
                .font(.headline)
            }
        }
    }
}

So from the inner child view now you can move to the root view which is a tab view.

ContentView -> View1 -> View2

And from View2 you want to pop to the Root view. So how can you do that?

Recently I faced this problem in my current project, and here is my solution.

Let me show you the demo first:

Github Source Code: Pop To Root View

Step 1: Create an AppState ObservableObject

import SwiftUI
import Combine

class AppState: ObservableObject {
    @Published var moveToDashboard: Bool = false
}

Step 2: Create an instance of AppState and add in contentView in SceneDelegate

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        // Create the SwiftUI view that provides the window contents.
        let contentView = ContentView()
        let appState = AppState()

        // Use a UIHostingController as window root view controller.
        if let windowScene = scene as? UIWindowScene {
            let window = UIWindow(windowScene: windowScene)
            window.rootViewController = UIHostingController(rootView:
                contentView
                    .environmentObject(appState)
            )
            self.window = window
            window.makeKeyAndVisible()
        }
    }

Step 3: Code of ContentView.swift 

So I am updating the appState value of the last view in the Stack which using .onReceive() I am capturing in the contentView to update the isActive to false for the NavigationLink.

The key here is to use .isDetailLink(false) with the NavigationLink. Otherwise, it will not work.

import SwiftUI
import Combine

class AppState: ObservableObject {
    @Published var moveToDashboard: Bool = false
}

struct ContentView: View {
    @EnvironmentObject var appState: AppState
    @State var isView1Active: Bool = false
    
    var body: some View {
        NavigationView {
            VStack {
                Text("Content View")
                    .font(.headline)
                
                NavigationLink(destination: View1(), isActive: $isView1Active) {
                    Text("View 1")
                        .font(.headline)
                }
                .isDetailLink(false)
            }
            .onReceive(self.appState.$moveToDashboard) { moveToDashboard in
                if moveToDashboard {
                    print("Move to dashboard: \(moveToDashboard)")
                    self.isView1Active = false
                    self.appState.moveToDashboard = false
                }
            }
        }
    }
}

// MARK:- View 1
struct View1: View {
    
    var body: some View {
        VStack {
            Text("View 1")
                .font(.headline)
            NavigationLink(destination: View2()) {
                Text("View 2")
                    .font(.headline)
            }
        }
    }
}

// MARK:- View 2
struct View2: View {
    @EnvironmentObject var appState: AppState
    
    var body: some View {
        VStack {
            Text("View 2")
                .font(.headline)
            Button(action: {
                self.appState.moveToDashboard = true
            }) {
                Text("Move to Dashboard")
                .font(.headline)
            }
        }
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Just one thing please note, if you use a Master TabView() of SwiftUI, and within the tabview you use views like above then the solution will not work.

Anyway, today we will learn how we can protect our android application.

At first, you have to decide do you want to use

• Free tool or
• Paid tool

Free Tool: Proguard

For a free option, you can obfuscate the source code. So if someone able to reverse engineering your application code, it will be a bit difficult for him to understand the source code.

Long ago, I used Proguard to obfuscate my android app’s source code. Even if you visit, android developer’s portal you will see this page: “Shrink, obfuscate and optimize your app”. So here you will learn, how to use and configure Proguard for your android application. The main difficulty to use Proguard is the configuration.

android {
    buildTypes {
        release {
            // Enables code shrinking, obfuscation, and optimization for only
            // your project's release build type.
            minifyEnabled true

            // Enables resource shrinking, which is performed by the
            // Android Gradle plugin.
            shrinkResources true

            // Includes the default ProGuard rules files that are packaged with
            // the Android Gradle plugin. To learn more, go to the section about
            // R8 configuration files.
            proguardFiles getDefaultProguardFile(
                    'proguard-android-optimize.txt'),
                    'proguard-rules.pro'
        }
    }
    ...
}

Proguard will not protect your android app completely, it just obfuscated your code.

Paid Tool: Dexguard

The company Guardsquare beside Proguard product also has another product named DexGuard which can be used to protect your android application. You can reuse the Progurad configuration file to use using dexguard.

But, I don’t like Dexguard. I used dexguard for 3 years from 2014 to 2016. This is a paid software. So in 2014, I paid 480 EUR to purchase the license. But in 2016, when I wanted to renew, they told me I have to pay 27,875 EUR. Even I became so angry, I published a blog post about that incident.

So basically, Dexguard pricing policy becomes one app to per app. One of the stupid policy. Rather than this, they should make a pricing model for individual, indie and company. But anyway, their product their policy, we can’t do anything.

So the question is, what tool I used to protect my android apps.

Paid Tool: Dexprotector

In 2016, when I faced this problem from dexguard, I discovered DexProtector. Since then, I have been using their tool to protect my android apps. Their pricing model is good. They don’t charge for a single app rather than a single license which can be used for multiple apps.

If you are interested, even they have a trial version for 10 days. I like DexProtector because of its pricing model, ease of usability and protection against analysis and cracking of android apps.

Conclusion

So, based on your situation, decide whether you want to use Proguard to obfuscate your code or you need complete protection. As there is no free tool to completely protect your app, so it needs to spend a good amount of money to secure the app.

This will be a two parts video series. So in this episode, we will learn how to reverse engineering android application. So we will download an APK file from Google Play Store. Then using some free tools we will reverse engineer the APK file to see the code. If the APK file is protected using any premium software then we can not reverse the code actually, or if the code is obfuscated then it will also be difficult to read the code.

But anyway, today we will learn the reverse engineering steps, and in my next episode, I will share with you how to protect your android application from spying eyes.

At first, we need to download some software.

Step 1:

Let’s download dex2jar software from the following link: https://sourceforge.net/projects/dex2jar/.

If you want to see the code there is a GitHub link as well, that is https://github.com/pxb1988/dex2jar

This is a zip file and in my desktop->demo3 directory I put the unzipped directory of this zip file.

Step 2:

We need to download JD-GUI software. You can visit the following link http://java-decompiler.github.io/ and in the download section based on your OS, you can download the software. Also, I put the software in my desktop->demo3 directory.

Step 3:

We need to target any android app. So in this case I am targeting EnglishScore: Free British Council English Test app from the following google play store link. https://play.google.com/store/apps/details?id=com.englishscore

Step 4:

We need to download the apk file. So please visit the following site https://apkpure.com/region-free-apk-download.

And here in the top text field, paste the google play store app link and click download.

It will take some time, and will show you another download link. Use that link to download the apk file. After downloading put the app in demo3->dex2jar-2.0 directory. Okay.

Step 5:

At this point, open your terminal if you use mac or open your windows PowerShell if you use windows.

In the terminal, go to the target directory. In my case it will be: cd /Users/mahmud/Desktop/demo3/dex2jar-2.0

Now fix the permission of all files by pasting the following commands:
chmod 0777 *

Now type ./d2j-dex2jar.sh and then type Eng and click tab to get the full file name. EnglishScore\ Free\ British\ Council\ English\ Test_v1.00.32_apkpure.com.apk . Now click enter. It will take some time and you will see a new file named
EnglishScore Free British Council English Test_v1.00.32_apkpure.com-dex2jar.jar is created.

Step 6:

Now go to your jd-gui->build->libs directory. And in my case, if I double click jd-gui-1.6.1.jar you will see the following interface of the app.

Now drag and paste the EnglishScore Free British Council English Test_v1.00.32_apkpure.com-dex2jar.jar file within the app and you will see the following things.

If you click the com section you will see what 3rd party libraries this app is used. Also in this app, if you click englishscore section, you will see the source code of the app.

Now click any file, for example, BritishCouncil.class file and you will see the actual code of the app. If this app was protected, or even obfuscated the code before releasing the app, we couldn’t easily understand the code after reverse engineering.

But unfortunately, many android app developers didn’t know about reverse engineering and spying eyes can easily reverse engineer the app. So it is really important to know by all android developers.

Conclusion

If you click different classes of this application, you can see all the code. Now think, if you are an android developer, you are developing a financial or banking app and you didn’t use any obfuscation techniques or especially for financial type app, you didn’t use any protection then how easy it is for hackers to hack your application or breach the security, right.

So anyway in my next tutorial, I will share how to protect Android apps. Stay tuned!

Step 1: First I created a Single customizable radio button.

import SwiftUI


//MARK:- Single Radio Button Field
struct RadioButtonField: View {
    let id: String
    let label: String
    let size: CGFloat
    let color: Color
    let textSize: CGFloat
    let isMarked:Bool
    let callback: (String)->()
    
    init(
        id: String,
        label:String,
        size: CGFloat = 20,
        color: Color = Color.black,
        textSize: CGFloat = 14,
        isMarked: Bool = false,
        callback: @escaping (String)->()
        ) {
        self.id = id
        self.label = label
        self.size = size
        self.color = color
        self.textSize = textSize
        self.isMarked = isMarked
        self.callback = callback
    }
    
    var body: some View {
        Button(action:{
            self.callback(self.id)
        }) {
            HStack(alignment: .center, spacing: 10) {
                Image(systemName: self.isMarked ? "largecircle.fill.circle" : "circle")
                    .renderingMode(.original)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: self.size, height: self.size)
                Text(label)
                    .font(Font.system(size: textSize))
                Spacer()
            }.foregroundColor(self.color)
        }
        .foregroundColor(Color.white)
    }
}

Step 2: I created a group of radio buttons

//MARK:- Group of Radio Buttons
enum Gender: String {
    case male = "Male"
    case female = "Female"
}

struct RadioButtonGroups: View {
    let callback: (String) -> ()
    
    @State var selectedId: String = ""
    
    var body: some View {
        VStack {
            radioMaleMajority
            radioFemaleMajority
        }
    }
    
    var radioMaleMajority: some View {
        RadioButtonField(
            id: Gender.male.rawValue,
            label: Gender.male.rawValue,
            isMarked: selectedId == Gender.male.rawValue ? true : false,
            callback: radioGroupCallback
        )
    }
    
    var radioFemaleMajority: some View {
        RadioButtonField(
            id: Gender.female.rawValue,
            label: Gender.female.rawValue,
            isMarked: selectedId == Gender.female.rawValue ? true : false,
            callback: radioGroupCallback
        )
    }
    
    func radioGroupCallback(id: String) {
        selectedId = id
        callback(id)
    }
}

Step 3: Main View

struct ContentView: View {
    var body: some View {
        HStack {
            Text("Gender")
                .font(Font.headline)
            RadioButtonGroups { selected in
                print("Selected Gender is: \(selected)")
            }
        }.padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}