DEV Community: 👨‍💻Ioannis Diamantidis

Keyboards options for SwiftUI fields

👨‍💻Ioannis Diamantidis — Sat, 30 Oct 2021 09:58:32 +0000

Introduction

One of the ways to improve the user experience when they fill a form on iOS apps is the use of keyboard types. Keyboard types can be used to show different keyboards based on the context of the field. If it's an email field, for example, you would probably prefer to present a keyboard with easy access to characters like the at (@) and the dot (.).

In this post, we are going to see how different keyboard options work with SwiftUI. First, we will cover the "common" scenarios, which include keyboards for fields like name, email, number, etc. Then, we will take a look at how we can add more custom options like a keyboard with a picker view.

The common cases

For the most common cases, SwiftUI provides the function keyboardType in a View extension. This function has a parameter of type UIKeyboardType, which is an enum with cases like emailAddress, numberPad, URL, etc.

For the full set of cases, you can refer to the documentation page.

You can use this extension from any SwiftUI View in the following way:

TextField("Type the email...", text: $email)
    .keyboardType(.emailAddress)

But what if we want to add a custom view? For example, a picker view, just like we can do using UIKit?

Keyboard with picker view

As you may have guessed, the answer lies exactly there.

We will have to use UIKit's UITextField and make it available to SwiftUI by creating a struct with conformance to the UIViewRepresentable protocol.

But let's take it step by step and see how we can create PickerField; a field that will show a keyboard with a picker, just like in the following screenshot.

To keep things separated, let's create a subclass of UITextField where we will implement the logic to show a keyboard with a picker.

import SwiftUI

class PickerTextField: UITextField {
    // MARK: - Public properties
    var data: [String]
    @Binding var selectionIndex: Int?

    // MARK: - Initializers
    init(data: [String], selectionIndex: Binding<Int?>) {
        self.data = data
        self._selectionIndex = selectionIndex
        super.init(frame: .zero)

        self.inputView = pickerView
        self.inputAccessoryView = toolbar
        self.tintColor = .clear

        guard let selectionIndex = selectionIndex.wrappedValue else {
            return
        }

        self.pickerView.selectRow(selectionIndex, inComponent: 0, animated: true)
    }

    @available(*, unavailable)
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    // MARK: - Private properties
    private lazy var pickerView: UIPickerView = {
        let pickerView = UIPickerView()
        pickerView.delegate = self
        pickerView.dataSource = self
        return pickerView
    }()

    private lazy var toolbar: UIToolbar = {
        let toolbar = UIToolbar()

        let flexibleSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)

        let doneButton = UIBarButtonItem(
            title: "Done",
            style: .done,
            target: self,
            action: #selector(donePressed)
        )

        toolbar.setItems([flexibleSpace, doneButton], animated: false)
        toolbar.sizeToFit()
        return toolbar
    }()

    // MARK: - Private methods
    @objc
    private func donePressed() {
        self.selectionIndex = self.pickerView.selectedRow(inComponent: 0)
        self.endEditing(true)
    }
}

// MARK: - UIPickerViewDataSource & UIPickerViewDelegate extension
extension PickerTextField: UIPickerViewDataSource, UIPickerViewDelegate {
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }

    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return self.data.count
    }

    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return self.data[row]
    }

    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        self.selectionIndex = row
    }
}

In this snippet, first, we declare two properties; one with the options of the picker and a Binding property which acts both as an input in case the field is pre-filled and as an output for when the user changes the value of the picker.

Then, in the initializer, we are expecting two arguments that we will use to instantiate the two properties. After that, we set the property inputView to the instance of the UIPickerView, and use the inputAccessoryView to set a UIToolbar with a "Done" button to help users dismiss the keyboard.

Finally, if there is a pre-selected value, we select this option from the UIPickerView.

In this file, we also add an extension to provide the implementation for the functions to conform to UIPickerViewDataSource and UIPickerViewDelegate and set the dataSource and the delegate for the UIPickerView to self.

Worth noting is the implementation of didSelectRow, where we set the selected row to the Binding property selectionIndex to pass this info to the parent view.

With that in place, we will create a new struct that we will use to communicate between the UIKit view and the SwiftUI world.

import SwiftUI

struct PickerField: UIViewRepresentable {
    // MARK: - Public properties
    @Binding var selectionIndex: Int?

    // MARK: - Initializers
    init<S>(_ title: S, data: [String], selectionIndex: Binding<Int?>) where S: StringProtocol {
        self.placeholder = String(title)
        self.data = data
        self._selectionIndex = selectionIndex

        textField = PickerTextField(data: data, selectionIndex: selectionIndex)
    }

    // MARK: - Public methods
    func makeUIView(context: UIViewRepresentableContext<PickerField>) -> UITextField {
        textField.placeholder = placeholder
        return textField
    }

    func updateUIView(_ uiView: UITextField, context: UIViewRepresentableContext<PickerField>) {
        if let index = selectionIndex {
            uiView.text = data[index]
        } else {
            uiView.text = ""
        }
    }

    // MARK: - Private properties
    private var placeholder: String
    private var data: [String]
    private let textField: PickerTextField
}

Same as the PickerTextField class, this struct will also have two properties; a list with the options and a binding property for the value of the field.

Once again, we will use the initializer to pass the values of these properties via its arguments. The initializer takes one more argument for the placeholder of the UITextField if the field has no value.

Then, we provide the implementations for the makeUIView and updateUIView requirements of the UIViewRepresentable protocol.

In the first one, we set the initial state for the text field by setting the value for the placeholder. In the second, we update the value of the PickerField with any new information we might get from SwiftUI.

Finally, from any SwiftUI view, we can use this struct in the following way:

@State var selectedIndex: Int? = nil
let options: [String] = ["GraphQL", "Swift", "Vapor"]

var body: some View {
    // ...
    PickerField("Select an option", data: self.options, selectionIndex: self.$selectedIndex)
    // ...
}

You can find the code for this PickerTextField, as well as the rest of the code and an example of how to use it from a SwiftUI View on this Gist.

Conclusion

And that's about it! In this post, we have first seen what is the current level of support for keyboard types on SwiftUI's TextField. Then, we investigated how we can provide support for more options by relying on the UIKit's UITextField, and its property inputView. This way, we can present a keyboard with a UIPickerView, or any other view we may want.

Thanks for reading, I hope you find this post useful and if you have any questions or comments about this post, feel free to contact me on Twitter!

Until next time!

Flutter: Two-way communication between a WebView and a web page

👨‍💻Ioannis Diamantidis — Sun, 17 Oct 2021 17:50:09 +0000

Displaying web content in an app is quite easy and straightforward with WebViews but what happens when we want to open a communication channel between the app and the web page we load on a WebView?

Let's say, for example, you want to "listen" to a button click event happening on the web page and take some action in the app. Or you want to update a label of a web page with some data from the app.

In this post, I will show you how you can communicate between the app and the web page of a WebView.

In order to do so, I am going to use an example to demonstrate how to achieve this communication in both directions; both from the web page to the app and from the app to the web page.

Let's get started!

This post is based on Flutter 2.5.2 and Dart SDK 2.14.3

Implementation

The package

Flutter doesn't have built in support for WebViews.
As a result, we are going to use a package with name webview_flutter.

So first thing first, let's edit pubspec.yaml and add the dependency:

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^2.1.1

The HTML file

Next, we are going to create the web page that we will later load in the WebView.

For the sake of this article and for ease, we are going to create an index.html file which we are going to load in the webview instead of loading a webpage from a URL.

Let's create an HTML file named index.html inside the assets folder (if the folder doesn't exist, feel free to create one).

Then, we will open this file and add the following content:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <style>
            .switch { position: relative; display: inline-block; width: 60px; height: 34px; }
            .switch input { opacity: 0; width: 0; height: 0; }
            label.switch { outline: none; }
            .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; outline: none; }
            .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; }
            input:checked + .slider { background-color: #2196F3; }
            input:focus + .slider { box-shadow: 0 0 1px #2196F3; }
            input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }
            .slider.round { border-radius: 34px; }
            .slider.round:before { border-radius: 50%; }
        </style>
    </head>
    <body>
        <h2 id="value">Toggle Switch is off</h2>
        <label class="switch">
            <input type="checkbox" name="myCheckbox">
            <span class="slider round"></span>
        </label>
    </body>
</html>

For brevity reasons, the CSS part is minimized.

This HTML file produces a web page with a label and a toggle switch. Our goal for this article is to listen to the toggle events from the app and update the text on the label to represent the corresponding state of the toggle switch.

To be able to access this html file from our application, we have to edit pubspec.yaml and add the following under the flutter section:

flutter:

  assets:
    - assets/index.html

The app

Now, with all the preparations done, we can focus on the app!

First of all, we will import the package:

import 'package:webview_flutter/webview_flutter.dart';

Then, we can create our webview like this:

WebViewController? _webViewController;

Widget buildWebView() {
    return WebView(
        initialUrl: 'about:blank',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) async {
            _webViewController = webViewController;
            String fileContent = await rootBundle.loadString('assets/index.html');
            _webViewController?.loadUrl(Uri.dataFromString(fileContent, mimeType: 'text/html', encoding: Encoding.getByName('utf-8')).toString());
        },
    );
}

In this snippet, we added a function that will return a new WebView and we pass some parameters.

Firstly, we will use about:black as the initial URL to load an empty page.
Then, we will set javascriptMode to unrestricted to allow the execution of Javascript code, and lastly, when the web view is created, we will load the content of the index.html and load it to the web view.

The only thing left is to call this function from the Widget build(BuildContext context), add the required imports and run the app. If you do so, you will be able to see the page with the label and the toggle!

Adding a message handler

The next step is to enable our WebView to receive messages from the web page.
For this, we will update the WebView we created before and add the javascriptChannels: parameter, like in the following snippet:

Widget buildWebView() {
    return WebView(
        .
        .
        .
        javascriptChannels: <JavascriptChannel>{
            JavascriptChannel(
                name: 'messageHandler',
                onMessageReceived: (JavascriptMessage message) {
                    print("message from the web view=\"${message.message}\"");
                },
            )
        },
    );
}

Here, we create a new JavascriptChannel with name messageHandler and provide a callback for when a message is received. For now, we just print the message.

We are now ready to send our messages from the web page.

Let's see how!

Sending message from the webpage

For this part, we are going to use some JavaScript to listen to the toggle events and then send a message to the app. This message will be different if the toggle is selected or not. Let's edit our HTML file and before the closing </body> tag, add the following content:

<script type="text/javascript">
    var _selector = document.querySelector('input[name=myCheckbox]');
    _selector.addEventListener('change', function(event) {
        var message = (_selector.checked) ? "Toggle Switch is on" : "Toggle Switch is off";

        if (messageHandler) {
            messageHandler.postMessage(message);
        }
        });
</script>

In this script, we are adding an eventListener for the toggle change event, and depending on whether it is selected or not, we are using the messageHandler that we created previously, to call the function postMessage, which in turn will trigger the onMessageReceived of the JavascriptChannel with the name messageHandler.

If you run the app and turn the toggle on and off, you will be able to see some messages on the console like message from the web view="Toggle Switch is on".

The last thing to achieve our goal is to update the label of the web page when we change the value of the toggle.

Evaluating JavaScript to update webpage's UI

WebViewController has a function with name evaluateJavascript and this is what we are going to use to update the UI.

Head over to the definition of the JavascriptChannel and instead of the print command on the onMessageReceived callback, add the following snippet:

final script = "document.getElementById('value').innerText=\"${message.message}\"";
_webViewController?.evaluateJavascript(script);

In this snippet, we are creating a variable with the JavaScript code to change the label on the web page, and then use the evaluateJavaScript to execute this code.

And that's about it, if you now run the app, the text of the label will change when the toggle is switched on or off.

Conclusion

In this post, we have seen how to achieve bidirectional communication between a WebView and a web page. Using this, we can use events from the website to trigger actions on the app and similarly adjust the content of the loaded website based on the information we have on the app.

I hope that you find this post useful and if you have any questions or comments about this post, feel free to reach out to me on Twitter!

Until next time!

Exploring Flutter's Scrollable.ensureVisible

👨‍💻Ioannis Diamantidis — Sun, 10 Oct 2021 16:59:46 +0000

Have you ever had to build an app with a scroll view of multiple widgets with different heights, and you wanted to add a link so that the user can automatically scroll from one widget to another? One such example could be the table of contents for an article or a menu.

In this post, I will showcase how we can implement this and in order to do so, I am going to use a screen with a few sections and a table of contents at the top of the screen with links to the corresponding sections.

Let's see how!

This post is based on Flutter 2.5.2 and Dart SDK 2.14.3

Solution

To do so, we are going to use Scrollable.ensureVisible within a SingleChildScrollView widget with a Column child.

Briefly, we will create a GlobalKey() for each section. Then we will use this key as the key of the widget that the link will be targeting. Finally, we are going to use this key when we press the link from the table of contents like in the following snippet:

final targetContext = targetKey.currentContext;
if (targetContext != null) {
    Scrollable.ensureVisible(
        targetContext,
        duration: const Duration(milliseconds: 400),
        curve: Curves.easeInOut,
    );
}

As a result, the target widget will get visible after 400 milliseconds.

In the next section, I will try to give a more detailed presentation of the implementation!

Implementation

Prep work

First of all, let's create a data structure that will represent the section. It will have a key, a title and a body.

class Section {
  final GlobalKey key;
  final String title;
  final String body;

  const Section(this.key, this.title, this.body);
}

The title will be used in the table of contents and the key will be used to scroll to the target section.

Then, we will use this class to generate some dummy data for our example. We can use some lorem ipsum to represent some long text.

const reallyLongBody =
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce venenatis pharetra dui, ac semper nulla dapibus ultrices.'
    ' Pellentesque sed erat accumsan lorem rhoncus mattis eu eget nulla. Phasellus sagittis vehicula dapibus. Nulla dolor nunc, '
    'feugiat ac ullamcorper vel, commodo sed lacus. Nunc volutpat rutrum euismod. Nullam venenatis imperdiet odio, non porta leo '
    'ullamcorper ac. Aliquam fringilla mauris ut ante faucibus, non tempus elit placerat. Donec sed porttitor tellus. Donec lobortis '
    'arcu id lectus commodo varius. Fusce tincidunt ante in faucibus suscipit. Nulla facilisi. Nunc at nibh dictum sem aliquet '
    'consectetur eu nec neque. Nullam ullamcorper vulputate nisl quis pharetra. Etiam dapibus ullamcorper magna, a iaculis libero '
    'dignissim in. Vestibulum dictum, justo posuere consectetur eleifend, augue mi dictum dui, eu sollicitudin elit mauris vel lacus. '
    'Donec dui felis, dapibus vel urna at, commodo facilisis felis.\nCurabitur faucibus leo ipsum, in vehicula risus rhoncus id. Donec '
    'ac velit quis nulla suscipit efficitur. Nulla non euismod neque. Sed blandit urna sed ex tempor sagittis. Curabitur condimentum nec '
    'dui quis sollicitudin. Proin consectetur, metus sed rutrum varius, mi augue placerat est, sed posuere risus nunc ac urna. Nam leo '
    'erat, bibendum non nibh sed, sollicitudin aliquet metus. Aliquam finibus turpis vitae leo laoreet molestie.';

final sections = [
  Section(GlobalKey(), '1. Section', reallyLongBody),
  Section(GlobalKey(), '2. Section', reallyLongBody),
  Section(GlobalKey(), '3. Section', reallyLongBody),
  Section(GlobalKey(), '4. Section', reallyLongBody),
  Section(GlobalKey(), '5. Section', reallyLongBody),
  Section(GlobalKey(), '6. Section', reallyLongBody),
];

Widgets

Next, let's create a widget for the Section, where we are going to show the title and the body of each section

class SectionWidget extends StatelessWidget {
  final Section section;

  const SectionWidget({Key? key, required this.section}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
        decoration: const BoxDecoration(
          color: Color(0xfffff8e2),
          borderRadius: BorderRadius.all(Radius.circular(8.0)),
        ),
        margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Text(
              section.title,
              textAlign: TextAlign.center,
              style: Theme.of(context)
                  .textTheme
                  .headline2
                  ?.copyWith(color: Colors.black),
            ),
            const SizedBox(
              height: 36,
            ),
            Text(
              section.body,
              style: Theme.of(context)
                  .textTheme
                  .bodyText1
                  ?.copyWith(color: Colors.black54, height: 1.3),
            )
          ],
        ));
  }
}

After that, let's create a widget for the link to a section. We will name it SectionLink and we will pass a section and the callback for the onTap event of the InkWell.

class SectionLink extends StatelessWidget {
  final Section section;
  final void Function(Section) onTap;

  const SectionLink({Key? key, required this.section, required this.onTap})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () => onTap(section),
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text(
          section.title,
          style: Theme.of(context)
              .textTheme
              .headline3
              ?.copyWith(color: Colors.black87, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

Next, we are going to add a TableOfContents widget, where we basically iterate on the sections and for each section, we create a SectionLink.

class TableOfContents extends StatelessWidget {
  final List<Section> sections;
  final void Function(Section) onItemTap;

  const TableOfContents({
    Key? key,
    this.sections = const <Section>[],
    required this.onItemTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(20),
      padding: const EdgeInsets.only(left: 16, top: 24, right: 16, bottom: 10),
      decoration: BoxDecoration(
        color: Colors.white12.withOpacity(0.3),
        borderRadius: const BorderRadius.all(Radius.circular(8.0)),
        border: Border.all(
          width: 2,
          color: Colors.grey,
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: sections
            .map((e) => SectionLink(section: e, onTap: onItemTap))
            .toList(),
      ),
    );
  }
}

Finally, let's create ArticlePage where we will tie everything together. In this widget, we will create a SingleChildScrollView with a Column widget containing the TableOfContents and a ListView with the sections.

For the TableOfContents, we are going to pass as parameters the section and the callback for when a section is tapped. This callback contains the logic to scroll to the target widget. First, we verify that there is a widget with this key in the tree, by ensuring that the value of the currentContext is not null. And then, we will pass this context to Scrollable.ensureVisible to scroll to the target widget.

For the ListView, we iterate over the sections and for each one, we create a new SectionWidget using the key from the section as the key for the widget.

class ArticlePage extends StatelessWidget {
  final List<Section> sections;
  const ArticlePage({Key? key, required this.sections}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    final tableOfContents = TableOfContents(
      sections: sections,
      onItemTap: (section) {
        final targetContext = section.key.currentContext;
        if (targetContext != null) {
          Scrollable.ensureVisible(
            targetContext,
            duration: const Duration(milliseconds: 400),
            curve: Curves.easeInOut,
          );
        }
      },
    );

    final listView = ListView.builder(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      itemCount: sections.length,
      itemBuilder: (BuildContext context, int index) {
        final section = sections[index];

        return SectionWidget(
          key: section.key,
          section: section,
        );
      },
    );

    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Screen'),
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                tableOfContents,
                listView,
              ],
            ),
          ),
        ),
      ),
    );
  }
}

If you now build and run the app, when you press on a link from the table of contents, you will have the same with the following video behavior.

You can also use dartpad.dev to find and run the code of this post.

More options

Now that we have seen how we can use Scrollable.ensureVisible, let's explore some more options that we can use to customize the transition to the target widget.

Two of those, which we have seen before in the previous example, are duration and curve. duration can be used to set the desired duration that we want the animation from the link to the target widget to take.

With the curve parameter, we can define the animation curve that the transition will follow. Basically, instead of making the transition at a constant rate, we can set a value to the curve parameter to change the animation over time, either by speeding it up or slowing it down at specific time frames. It can take values like Curves.bounceInOut, Curves.easeInOut, etc. For example, with Curves.easeInOut the animation will start slowly, then speed up and will then end slowly.

Note: A visualization of the different options can be found on api.flutter.dev.

Another parameter of Scrollable.ensureVisible is alignment, and it can be used to set the position of the target widget. If the value is 0.0, the child will be positioned as close to the leading edge of the viewport, 0.5 as close to the center, and 1.0 as close to the trailing edge.

Finally, the last parameter is alignmentPolicy and can be used to decide the policy when applying the alignment parameter. This parameter is of type ScrollPositionAlignmentPolicy, which is an enum with the following options: explicit, keepVisibleAtEnd or keepVisibleAtStart.

When it is set to explicit, it will use the alignment property to decide where to align the target object. If it is set to keepVisibleAtEnd, it will make sure that the bottom of the target item is just visible if the bottom edge of the target item is below the bottom edge of the scroll container. Contrary, keepVisibleAtStart, will make sure that the top of the target object is just visible if the top edge of the target object is above the top edge of the scroll container

Conclusion

And this is it! I hope that you find this post useful and it has given you some insights into how to use Scrollable.ensureVisible and all its options to scroll to a specific widget on a scroll view.

If you have any questions or comments about this post, feel free to reach out to me on Twitter!

Until next time!

Quick and simple load testing with Apache Bench

👨‍💻Ioannis Diamantidis — Wed, 15 Jul 2020 18:55:30 +0000

Apache Bench or ab for short, is a command-line tool to perform simple load tests on an HTTP server, be it a website or an API.

By running the following command, you will get an overview of how the server is performing under load:

ab -n 100 -c 10 <url>

So, in this post, I will try to explain how we can use Apache Bench. I will start with how to install it, then proceed on how to use it and the available options, and finally, I explain how to interpret the results.

Let's get started!

Installation

One of the advantages of Apache Bench is that you may already have ab installed, depending on the OS you are using.
For macOS users, it comes pre-installed by default, and if you are using a Linux Distribution, there are a lot of chances that it is also installed as it comes with the httpd package. Try to run ab -help to verify if that's the case.

In case it is not installed, you will need to install the apache2-utils package.
For example, if you are using Ubuntu you will have to run:

apt-get update
apt-get install apache2-utils

So, now, that we have Apache Bench installed, let's see how we can use it and some of the available options.

Usage

The simplest possible way to use Apache Bench is by running ab <url>. This command will perform a single network request, but this is not exactly what we would call "load". For this reason, Apache Bench comes with a plethora of options you can use to define more complex use cases.

Some of the most useful ones are the following:

-n: Number of requests
-c: Number of concurrent requests
-H: Add header
—r: flag to not exit on socket receive errors
-k: Use HTTP KeepAlive feature
-p: File containing data to POST
-T: Content-type header to use for POST/PUT data,

Now you can use those options like so:

ab -n 100 -c 10 -H "Accept-Encoding: gzip, deflate" -rk https://0.0.0.0:4000/

⚠️ Please note that you need the trailing / on the URL, or else you will get the error message ab: invalid URL.

If you want to perform a benchmark test for a POST request, you can run the following command:

ab -n 100 -c 10 -p data.json -T application/json -rk https://0.0.0.0:4000/

💡 TIP: For a full list of options, you can run ab -help, refer the man page by running man ab, or visit the documentation online.

Let's now see how the output would look like and how to interpret it!

Response interpretation

Once ab completes the HTTP requests, it will generate an output that will look like the following snippet:

Concurrency Level:      10
Time taken for tests:   0.791 seconds
Complete requests:      1000
Failed requests:        0
Keep-Alive requests:    1000
Total transferred:      4649081 bytes
HTML transferred:       3934000 bytes
Requests per second:    1264.17 [#/sec] (mean)
Time per request:       7.910 [ms] (mean)
Time per request:       0.791 [ms] (mean, across all concurrent requests)
Transfer rate:          5739.47 [Kbytes/sec] received

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:        0    1   9.4      0     105
Processing:     3    6   7.1      5      77
Waiting:        3    6   6.8      5      65
Total:          3    7  11.9      5     111

Percentage of the requests served within a certain time (ms)
  50%      5
  66%      6
  75%      6
  80%      6
  90%      7
  95%      8
  98%     62
  99%     77
 100%    111 (longest request)

In this first section, you can find some useful information like, for example, that the number of Complete requests was 1000 and the Concurrency Level was 10. Furthermore, you can see that it performed 1264.17 Requests per second.

In the Connection Times section, you can see that the fastest request took 3 ms (Total row and min column), the slowest took 111 ms (Total row and max column), while the mean was 7 ms (Total row & mean column).

In the last section, you get an overview of the response times in a cumulative distribution. In this example, we can see that 95% of requests took 8 ms or less to complete and that total response times of more than 100 ms is an outlier as it covers less than 1% of the sample.

Conclusion

And that's about for this intro on Apache Bench! By now, you should be able to use the ab command to perform load tests on an HTTP server and get some insights from the results.

In the end, I would say that Apache Bench is an ideal solution if you want to perform a quick load test since it is probably already installed on your machine and it is really simple to use. In case you want to cover more advanced use cases like flows and random URL entries, then I think that there are other more modern and feature-complete tools. A few examples are JMeter, K6 and Gatling.

Thanks for reading, I hope that you find this post useful, and if you have any questions, feel free to write a comment or reach out to me on Twitter!

Until next time!

➡️ This post was originally published on my blog.

Photo by Jake Givens on Unsplash

How to specify an alternative location for the AndroidManifest.xml

👨‍💻Ioannis Diamantidis — Sat, 11 Jul 2020 14:18:28 +0000

By default, Gradle expects an AndroidManifest.xml file on the root directory of the main source set of every Android project. But what if for some reason we want to change this?

For me, one such case is the default Kotlin Native project. When creating a new project, the template creates a few source sets for the common, the iOS, and the Android implementation. For the common and the iOS source sets, it uses names like commonMain and iOSMain. But when it comes to the Android source set, the name is not the expected androidMain but rather a plain main.

As I wanted to keep a consistent and more clear naming for the source sets, I decided to rename the name of the folder main to androidMain. And that's when the problem appeared. When I tried to build the app, I got an error saying "Cannot read packageName from src/main/AndroidManifest.xml".

The good news are that we have the option to change this location on the build.gradle!

Inside the android block, we can set manifest.srcFile to the new location of the AndroidManifest.xml.

sourceSets {
    main {
        manifest.srcFile 'src/androidMain/AndroidManifest.xml'
        java.srcDirs = ['src/androidMain/java']
        res.srcDirs = ['src/androidMain/res']
    }
}

And voilà!!
Gradle uses the AndroidManifest.xml inside the androidMain folder and we are now able to build and run the app again!

➡️ This post was originally published on my blog.

Dart extensions to flatten Flutter's deep nested widget trees

👨‍💻Ioannis Diamantidis — Tue, 07 Jul 2020 15:28:32 +0000

In version 2.7, Dart introduced extensions to allow developers to add further functionality to an existing component. Extensions can be a great tool in our toolkit when we write business logic, but they can also be as useful in other areas! One such example can be the way we construct the widgets.

Coming from an iOS background and inspired by SwiftUI's ViewModifiers, I was intrigued to use the Dart extensions in a similar fashion to reduce the visual clutter that comes with the deep tree of many nested widgets.

Let's see an example!

With nested widgets

Here we have the default widget created on dartpad.dev, where we also wrapped the text inside a Padding widget.

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return
      Padding(
        padding: const EdgeInsets.all(16),
        child: Text('Hello, World!', style: Theme.of(context).textTheme.headline4)
      );
  }
}

Now, let's see how we can accomplish the same with the help of Dart extensions.

With extensions methods

First, we will introduce an extension on Widget that will wrap the caller with a padding Widget:

extension WidgetModifier on Widget {
  Widget padding([EdgeInsetsGeometry value = const EdgeInsets.all(16)]) {
    return Padding(
      padding: value,
      child: this,
    );
  }
}

With this extension in place, we could turn our Widget to the following:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, World!', style: Theme.of(context).textTheme.headline4)
            .padding();
  }
}

This example is just a small one, but I hope you get the picture!!

We are using the extension method as a syntactic sugar to structure our layout, instead of wrapping a widget inside another one.

Similarly, we can add more functions to our extension and create more complex user interfaces:

extension WidgetModifier on Widget {

  // ...

  Widget background(Color color) {
    return DecoratedBox(
      decoration: BoxDecoration(
        color: color,
      ),
      child: this,
    );
  }

  Widget cornerRadius(BorderRadiusGeometry radius) {
    return ClipRRect(
      borderRadius: radius,
      child: this,
    );
  }

  Widget align([AlignmentGeometry alignment = Alignment.center]) {
    return Align(
      alignment: alignment,
      child: this,
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, World!', style: Theme.of(context).textTheme.headline4)
            .padding()
            .background(Colors.lightBlue)
            .cornerRadius(BorderRadius.all(Radius.circular(8.0)))
            .padding(EdgeInsets.symmetric(horizontal: 8, vertical: 16))
            .background(Colors.purple);
  }
}

Isn't that great? We now have a clean and elegant widget that we can easily understand! Imagine how many levels of nested widgets you would have to use to recreate this layout without the help of extensions.

Wrap-up

To wrap up, in this post, we have followed an alternative approach on how to structure a widget tree in a Flutter project, by applying a concept similar to SwiftUI's ViewModifiers.

As a result, this could help us flatten the widget hierarchy and reduce nesting. I have showcased a few examples of such extensions, but you can use the same concept in many other cases as you see fit.

Thanks for reading, I hope you find this post useful!

If you have any questions or comments about this post, feel free to write a comment or reach out to me on Twitter!

Until next time!

Turn your browser into an WYSIWYG editor with "document.designMode"

👨‍💻Ioannis Diamantidis — Fri, 03 Jul 2020 16:08:15 +0000

TLDR;

Open the browser's Javascript console.
Execute document.designMode = 'on';.
Click on any text in the screen and start typing!

Isn't it crazy! 🤓

designMode is a not so well known feature that allows us to make the entire webpage editable.
By default, its value is off, but once we set the value to on, it makes the entire page editable and allows us to change the content as we wish.

If you want to disable it, you simply set its value back to off (document.designMode = 'off';).

It's also worth mentioning that the vast majority of modern browsers support this feature.

Hope you find this little tip helpful! 🚀

TIL: How to list all the targets on a Makefile

👨‍💻Ioannis Diamantidis — Wed, 01 Jul 2020 15:50:51 +0000

make is great tool to orchestrate the setup and build process of a project. It expects a Makefile, where we define targets to execute, like for example install and run. Then we can use make install and make run to execute those tasks.

While target names like install are quite common, the problems arise when we have to deal with a lengthy Makefile, and we are not aware of all the available targets.

Hopefully, with a slight modification of our current Makefile and the addition of a new target, we can expose this information and access it from the Terminal app. Let's see how!

First, we will have to document each of the existing targets. To do so, we will add a comment starting with ## right after the target's name.

install: ## Install 
    @echo "Installing..."

run: ## Run
    @echo "Running..."

Then, we will use the grep and sed command to get the name of the target and the documentation, like in the following snippet:

.DEFAULT_GOAL := help
.PHONY: help

help:
    @grep -E '^[a-zA-Z0-9_-]+:.*?## .*$$' $(MAKEFILE_LIST) \
    | sed -n 's/^\(.*\): \(.*\)##\(.*\)/\1\3/p' \
    | column -t  -s ' '

We will also set the .PHONY and the .DEFAULT_GOAL variables. The last one will make help the default target when running make without a specific target.

Now, if we head back to the Terminal app, and run make, we will get the list of the documented targets as an output 🚀

install  Install
run      Run

➡️ This post was originally published on my blog.

How to add support for dark mode on your website

👨‍💻Ioannis Diamantidis — Mon, 29 Jun 2020 16:51:48 +0000

In recent years, dark mode has grown in popularity as more and more devices and browsers are adding support for it.

Those reasons make it a great little feature that we can add on our websites to improve the experience of the users who prefer to use dark mode.

Let's see how we can support this feature in 3 steps!

First, we will take advantage of another great CSS feature: CSS variables

On the :root level, we will define two variables; one with the color of the background and one with the color of the text.

:root {
    --background-color: #FFF;
    --text-color: #000;
}

Then, we will define a prefers-color-scheme media query for the dark color theme. In this media query, we will override the values of the variables that we defined in the previous step.

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #000;
        --text-color: #FFF;
    }
}

Lastly, we will use those variables to assign their values to CSS properties. In our case, we will use the variable to set the background and the color of the body.

body {
    background: var(--background-color);
    color: var(--text-color);
}

Now all you have to do is to find a color palette for the dark theme and apply it following those steps!

➡️ This post was originally published on my blog.

Improve the accessibility of your website using the aria-label attribute

👨‍💻Ioannis Diamantidis — Sat, 27 Jun 2020 14:22:00 +0000

With the ever-growing number of services offering their products solely through digital channels, digital accessibility is becoming more and more important.

The lack of accessibility may lead to the exclusion of people with disabilities from those services.
That's why we should all care and make our digital services more and more accessible.

When it comes to the web, we can start with small steps and slowly make a website more and more accessible.

For instance, we can start by using the aria-label attribute to add a description on elements that don't have a text label visible on the screen.

Let's see an example...

It's quite common, when we have a link to a social media account, to use the logo of the social media platform instead of the actual name. To make those links more accessible, you can add the aria-label on the anchor tag leading to the social media account, like in the following snippet:

<a href="https://twitter.com/diamantidis_io" aria-label="Twitter">
 ...
</a>

I hope that this post will make you more aware of this topic and motivates you to make your website more accessible!

If you are interested to find potential accessibility issues on your websites, you can use Lighthouse in Google DevTools or the web.dev Measure tool provided by Google.

HTTPS on localhost using mkcert

👨‍💻Ioannis Diamantidis — Fri, 26 Jun 2020 16:02:46 +0000

When working on a website or a service, the development environment should imitate as much as possible the production one. And since most production websites and services are served on HTTPS, the same should happen for the development versions as well. This is exactly what mkcert is trying to solve.

mkcert is a tool that makes it easy to generate locally-trusted SSL certificates signed by a local CA (Certificate Authority).

On macOS, you can use Homebrew to install the tool:

# Install on macOS
brew install mkcert
# Generate and install a local CA
mkcert -install
# Create a new certificate
mkcert -key-file key.pem -cert-file cert.pem localhost

Now you can use the SSL key and cert for your local server. For instance, if you have a Jekyll blog, you can use the following command to serve on HTTPS

jekyll server --ssl-cert ./cert.pem --ssl-key ./key.pem

Now, you can browse your local Jekyll site on https://localhost:4000! 🎉

➡️ This post was originally published on my blog.

Photo by Tobias Giess on Unsplash

Jekyll Tip: Use the --host option on your local site to access it from any device on your network

👨‍💻Ioannis Diamantidis — Tue, 23 Jun 2020 15:56:31 +0000

The command jekyll server, by default, binds to 127.0.0.1, as you can see in the following logs.

$ jekyll serve
[...]
Server address: http://127.0.0.1:4000/
Server running... press ctrl-c to stop.

This means that the website is only accessible by the device that you are running the command.

To make the website accessible by other devices on the same network, run jekyll serve --host=0.0.0.0.

$ jekyll serve --host=0.0.0.0
[...]
Server address: http://0.0.0.0:4000/
Server running... press ctrl-c to stop.

This will make the Jekyll blog accessible by the IP address of your machine, and thus accessible by other devices on the same network.

A neat command that you can use to find the IP address of your machine is the following:

ifconfig en0 | grep "inet " | awk '{print $2}'

This will output your IP on the Terminal in the format 192.168.0.XXX.

Type this IP followed by :4000 on your favorite browser and you will be able to now browse your blog from the mobile device!! 🚀