DEV Community: Andrey M

Attempt to rewrite my note-taking app

Andrey M — Thu, 10 Jul 2025 16:42:37 +0000

Introduction

For more than a year now, I have been periodically returning to trying to rethink my note-taking application, Norka, to update the interface, add modern features, and finally add synchronization with thae cloud.

I've had several attempts to use Rust to add speed and reliability to the application. I use C# (Gir.Core) for the same reasons and because I love this language. But unfortunately, in the end I returned to Python, because it and PyGObject provide the necessary development speed and support a lot of libraries that I need for my work. The Python development ecosystem for GTK looks the most mature and complete.

So, after a year of experimentation and prototyping, studying analogs and my application requirements, I started another attempt to implement Norka 2.

Inspiration

I have been working with macOS for more than 10 years and I believe that it is for this OS that the most beautiful and user-friendly applications have been created from the point of view of UX. Let's leave beauty out of the box, as it's a matter of taste, and turn to user experience.

I have tried working with many applications, especially considering those that have received awards for their design - Craft, Ulysses, Bear, Evernote, IA Writer, etc. I also looked at various online services such as Microsoft Loop, Confluence (and why not?) and others . At some point in time, I caught myself thinking that 2 services had become the most convenient for me: craft.do as a desktop application and web service, and Microsoft Loop as a web service. It was decided to assemble the functionality of the new version of Norka from them, namely:

Workspaces
A tree structure where each page can have nested pages.
Customization of the design of pages and spaces: icons and covers help with work and just make work more fun.
Instead of Markdown, use rich formatting in the document itself, like office software.
The ability to publish pages, share them with other users, or make them publicly available to everyone.
Sync with the cloud.
Encryption of spaces and pages with password access for published pages.
Integration with LLM both locally and externally (whether Ollama or OpenAI)
The ability to create tasks, as implemented in Craft.
Advanced search capabilities, calendar linking, etc.

Of course, this is not the final list, and it will be updated. However, it's a great set to start with :)

By the way, you can follow the updates on my Twitter or on the project's Github.

Workspaces

The first thing to do was to sort out the workspaces. The task they are designed to solve is to group pages by topic, project, or otherwise. The user can decide for himself, the main thing is to give him the opportunity. And at the same time, make it possible to add an icon, cover, and control functionality. So we get something like this:

The user can select an emoji icon and a cover from the preset images. However, in the future I plan to add integration with online services such as Pexels or Unsplash.

Workspaces contain pages that are deleted when the space is deleted. So be careful 🙂

Pages

If workspaces are complementary functionality, then creating and editing text is the main one. Therefore, it will require the most work on itself, but let's see what has already been implemented.

Editing

Surprisingly, the fact is that pages can already be created and their contents edited. At the same time, syntax highlighting is now being used, which migrated from the first version of Norka - Markdown markup. In addition to this, I started implementing work with formatting tags, without having to use a markup language. My experience suggests that this is a more convenient option, especially if you combine it with Markdown - use markup during typing as shortcuts for tags. For example, if a user types

# The Awesome Title

, then this text will be automatically converted to a title, and the # sign at the beginning of the line will be removed like this:

The Awesome Title

This should work for titles, links, images, and other markup elements.

And if the ability to insert tags was not particularly difficult, then the issue of saving and loading required analysis and study, since the standard functionality of Gtk libraries allows you to save text, but there is no formatting in it. After trying out various data serialization options, I came to the decision not to mix content and formatting, and these two parts of the same whole should be stored separately from each other. This is about how documents are stored .docx and .odt.

Nesting

You can also nest pages inside each other and move them between workspaces. This can be done either by simply dragging the mouse or using the context menu.

The nesting is not limited, but in the future this parameter may be revised after analyzing the work on large volumes and deep nesting of pages.

To be continued

A start has been made, but there is still a lot of work ahead, both in adding new functionality and debugging interfaces and performance. It's too early to talk about release plans, those who suffer can download the source codes and build the application themselves, everything is available on GitHub.

See you!

How not to be afraid of your team

Andrey M — Tue, 08 Aug 2023 06:46:29 +0000

One of my co-workers, who has just become a team leader, is having difficulty arranging meetings with the team due to his fear of communicating with one of the developers. He is afraid to say something wrong and get an adverse reaction, which can lead to a conflict or even a developer leaving the team. Let's look at this situation, identify the problems it causes, and think about how to solve them.

Understanding the reasons

One of the basic and, coincidentally, the most challenging aspects of managing a team is the ability to communicate with different people, each of whom may have their own views on development, their own expectations from colleagues, and in general perceive the world differently. Although this is an entirely normal situation for newcomers to management, it is often difficult to cross the line of insecurity and fear of being rejected. In this post, I want to share my experience and tips on how to deal with this problem and improve the quality of meetings with the team.

First of all, you need to understand the source of your fears about talking with an employee. Perhaps you feel that you do not have sufficient competence or weight to conduct a dialogue with him. Or maybe you heard or saw how he reacts to criticism or suggestions for improving the work and it seems that your words will certainly be taken with hostility. Perhaps you just do not know how to approach him and start a conversation, and this imaginary awkwardness fetters you.

In any case, it is important to realize that your fear does not help you and your team. If you avoid meetings with the team or keep them formal and superficial, you lose the opportunity to get feedback, identify problems, motivate, and develop your subordinates. Moreover, it is the lack of meetings that increases the risk of losing the trust and respect of the team, which may feel that you are not interested in their opinion and success.

Fixing

What to do? Here are a few steps that can help you overcome your fear and communicate effectively with your team:

Prepare for the meeting. The key to a good meeting is preparation. It works with any meeting, even with a date ;) So, to simplify a difficult situation as much as possible, you need to think about what you want to talk about and what conclusion to make.
Choose a suitable time and place for the meeting. There is no need to hold a meeting at a time when the boss needs you to respond urgently or the developer you are going to talk to is busy fixing a bug in the prod. Offer the developer a convenient time and place to meet, such as a quiet office or coffee shop. I like to have meetings at the beginning or end of the week when everyone is already relaxing before the weekend.
Start the meeting on a positive note. Ask your colleague about his mood, Greet the developer, thank him for his work, and share your successes or plans. Show your interest and involvement in the project and the team.
Listen carefully. As D. Carnegie wrote in his book “How to Win Friends and Influence People” - the ability to listen is the most important skill in a conversation. Let your employee express their emotions, tell their opinion about work and colleagues, and ask questions. Do not interrupt him, do not immediately criticize him, and do not ignore his words. Try to understand his point of view, motives, and problems. Confirm that you hear and understand him using words and gestures. Ask clarifying or open-ended questions to delve deeper into a topic.
Express your opinion honestly and tactfully. Tell the developer what you think of their work, behavior, or ideas. Use facts, not judgment, no one likes to have their work criticized. Give specific examples from your experience, even if they were unsuccessful, this will show you as a person, and not boss. Admit your mistakes or shortcomings, if any. Give the developer a chance to respond to your criticisms or suggestions without insisting on their opinion.
Seek compromise and cooperation. Don't try to win an argument or prove yourself right. Recognize the advantages and disadvantages of different approaches and solutions. Your task as a leader is to develop the team. The ability to make mistakes and learn from your mistakes is one of the most important aspects of learning, but you must warn the team against critical mistakes that will affect the business. Ask the developer what they can do to improve the situation or solve the problem. Offer your help or support if needed, but don't push.
End the meeting on a positive note. Summarize the results of the meeting, and once again list what you talked about and agreed on. Thank the developers for their contribution, it really means a lot to you. Express your respect and trust in him. Invite him to the next meeting or feedback.

Conclusion

I hope these tips will help you overcome your fear and communicate effectively with your team. Remember that the developer is not your enemy, but your colleague and partner, who is also interested in the success of the project and the team. If you treat him with respect and trust, he will most likely return the same to you.

Make a weather app with Dart

Andrey M — Sat, 29 Jul 2023 20:12:12 +0000

Today we're going to build a console application that can fetch and show weather for the given location. Under the hood, it uses Open-Meteo as a weather data source. In addition to the Dart language, we will use several libraries to implement the application:

args to parse command-line arguments
http to fetch the data via API
console to make output of the app more fancy ✨

Concept

To start developing, we need to design how our application should work: how to get input from the user, how to determine what coordinates the place is located and how to fetch weather conditions and forecasts for this location. While it seems like a small application we never know do we want to grow it into something bigger or not, and as good developers do, we have to think about architecture before we start. Let's split these tasks into 3 steps.

User's input

Command-line or console applications usually work straightforwardly from start to end. Users can pass the data to process in the beginning by entering values as arguments to the application.

For example:

dart compile exe -o myApp bin/myApp.dart

That's a lot, I know, but let's see what is presented here.
dart - is the application itself. Next goes a bunch of arguments:

compile, exe - command and subcommand to the dart program, it describes the main command to execute.
-o myApp - argument, which tells what the name of the output file should be.
bin/myApp.dart - the last argument pointing to the filename to be compiled.

There could be more or less arguments, all of them passed and parsed when application starts. But, how to do that?

Parsing arguments

Dart has a package to work with arguments, it helps to design a command-line interface, parse the arguments and show usage examples if needed. It is called args.

To start, we need to instantiate the object of the ArgParser class and then add options, arguments, and flags to let the parser know what we are expecting for input.

import 'package:args/args.dart';

void main() {
  // Initialize the ArgParser object
  final argParser = ArgParser()
    // Add a boolean flag.
    ..addFlag('debug', help: 'enable debug mode')
    ..addFlag('select',
        abbr: 's',
        help: 'select from found locations, otherwise first found will be used')
    // Then add options that can modify app behavior
    ..addOption('temp_unit',
        abbr: 't',
        defaultsTo: 'celsius',
        allowed: ['celsius', 'fahrenheit'],
        help: 'temperature units')
    ..addOption('wind_unit',
        abbr: 'w',
        defaultsTo: 'kmh',
        allowed: ['kmh', 'ms', 'mph', 'kn'],
        help: 'wind speed units')
    ..addOption('prec_unit',
        abbr: 'p',
        defaultsTo: 'mm',
        allowed: ['mm', 'inch'],
        help: 'precipitation units');
}

As you can see, flags are kind of indicators, they can be true or false. On the other hand, options can take any values but they can be limited to allowed values only. There is a much more feature available, like commands or rest values such as in the example above, and you can read about them in the package documentation.

Finding the location

When user input is collected and parsed, our application logic comes first. It starts with the need to find the coordinates of a given location because the Open-Meteo API requires coordinates to provide us with a forecast. To do this, we can use reverse geocoding, and for these purposes Open-Meteo offers us the API method https://open-meteo.com/ru/docs/geocoding-api , to which we must pass the name of the place, and in response we will receive a list from suitable locations. Each location contains a lot of geographic information, but we will only be interested in the name and coordinates.

Let's start with an API request. We need a function that takes a location name and returns a list of locations from the API response. Something like this:

Future<List<Location>?> getCoordinates(String locationName,
    {int count = 5}) async {
    // Send request and parse response
}

In order to make a request we need to build a Uri object.

  final uri = Uri.https(
    'geocoding-api.open-meteo.com',
    '/v1/search',
    {'name': locationName, 'count': count.toString()},
  );

Now we can send an HTTP request and process results:

 try {
    // Send request and await for response.
    final result = await http.get(uri).timeout(Duration(seconds: 5));

    // Check response HTTP Code.
    if (result.statusCode != HttpStatus.ok) return null;

    // Try to parse JSON body into a list of `Location` objects
    final jsonBody = jsonDecode(result.body) as Map<String, dynamic>;
    if (jsonBody['results'] == null) return null;

    return jsonBody['results']
        .map<Location>((item) => Location.fromJson(item))
        .toList();
  } on TimeoutException {
    print('Operation timed out');
    return null;
  } catch (e) {
    print('Error occured while getting location coordinates: $e');
    return null;
  }

Our Location model will look like this:

class Location {
  final double latitude;
  final double longitude;
  final String name;
  final String? country;
  final String? countryCode;

  Location({
    required this.latitude,
    required this.longitude,
    required this.name,
    this.country,
    this.countryCode,
  });

  factory Location.fromJson(Map<String, dynamic> json) => Location(
        name: json['name'],
        latitude: json['latitude'].toDouble(),
        longitude: json['longitude'].toDouble(),
        country: json['country'],
        countryCode: json['country_code'],
      );

  @override
  String toString() {
    return '<Location: $name, $country>';
  }
}

Cool! Now we have a list with Location-s and thus we can go to the next part - get the current weather conditions!

Current weather condition

Let's start with defining CurrentWeather model. As you may see in the Open-Meteo API condition can contain a lot of data such as temperature, precipation, UV-level and more. To make our code compact we will care only about few of them: temperature, weather code and wind speed.

class CurrentWeather {
  final double temperature;
  final double windSpeed;
  final int weatherCode;

  CurrentWeather(
      {required this.temperature,
      required this.windSpeed,
      required this.weatherCode});

  factory CurrentWeather.fromJson(Map<String, dynamic> json) => CurrentWeather(
        weatherCode: json["weathercode"].toInt(),
        temperature: json["temperature"].toDouble(),
        windSpeed: json["windspeed"].toDouble(),
      );
}

All that remains for us is to form a request to the server and process the response in the same way as we did in the getCoordinates function:

create a Uri object
using the http library we send a request to the API and wait for a response
check that the response contains no errors and try to parse JSON into a CurrentWeather object.

Future<CurrentWeather?> getCurrentWeather(Location coordinates) async {
  final url = Uri.https(
    'api.open-meteo.com',
    '/v1/forecast',
    {
      'latitude': coordinates.latitude.toString(),
      'longitude': coordinates.longitude.toString(),
      'current_weather': true.toString()
    },
  );

  try {
    final result = await http.get(url).timeout(Duration(seconds: 5));
    if (result.statusCode != HttpStatus.ok) return null;

    final jsonData = json.decode(result.body)['current_weather'];
    return CurrentWeather.fromJson(jsonData);
  } on TimeoutException {
    print('Operation timed out');
    return null;
  } catch (e) {
    print('Error occured while getting location coordinates: $e');
    return null;
  }
}

Finishing steps

In order to make the users of our application a little more satisfied, I added a function for a beautiful output of the received data.

void printWeather(Location location, CurrentWeather weather) {
  final temp = weather.temperature > 0
      ? format('{color.gold}${weather.temperature}{color.end}')
      : format('{color.blue}${weather.temperature}{color.end}');

  var condition = '🌚';
  switch (weather.weatherCode) {
    case 0:
      //    Clear sky
      condition = '☀️';
      break;
    case 1:
      // Mainly clear
      condition = '🌤';
      break;
    case 2:
      // Partly cloudy
      condition = '⛅️';
      break;
    case 3:
      //    Overcast
      condition = '☁️';
      break;
    default:
      break;
  }
  print('${location.name}, ${location.country} $condition  $temp°C');
}

Thank you for being with me, like, share, and subscribe are always appreciated ❤️ ! You can find full code of this article on GitHub https://github.com/amka/spotty. See you in the next chapters!

Reading CSV in Dart

Andrey M — Fri, 04 Nov 2022 14:43:07 +0000

What is a CSV files

CSV is a common format for transferring tabular data between different programs. Its history goes back centuries, to a time when computers were big and trees were green. In the general case, it represents data separated by commas and collected in lines so that each line defines a specific record. However, variations occur: for example, some programs separate values with tabs rather than commas, while also using the .csv extension, which can cause applications to crash.

Let's see an example of such data:

id, title, type, count
1, "Citroen C3", Car, 2
2, "KTM 890 ADVENTURE R", Motorcycle, 4
3, "Jeep Avenger", Car, 1
4, "Polestar P1", Car, 3

As you can see, it looks like we have presented the table as text: each row is a file row, and the first row is a header with column names. You may also notice that double quotes sometimes surround strings, this is done in case the columns contain control characters or other characters that can break formatting, such as commas. Actually, there is an RFC describing CSV format: RFC4180.

Today we will focus on how to read such files, how to do it efficiently, and even try to determine the data types inside the strings. So let's get started.

Read CSV file synchronously

Let's start by defining the API we want to get. For our program, the following is enough:

get the file name when running from the command line
check that the name is passed, otherwise, we print out the problem to the console and exit
if the path is specified, read the file and output all lines sequentially to the console and exit

import 'dart:io';

import 'package:csv_reading/csv_reading.dart' as csv_reading;

void main(List<String> arguments) {
  if (arguments.isEmpty) {
    print("Usage: csv_reading path/to.csv\n");
    exit(1);
  }
  final path = arguments[0];

  final lines = csv_reading.readCsvSync(path);
  lines?.forEach((element) => print(element));
}

Now that we've defined the interface, we need to write the readCsvSync method. It must take a string pointing to a file on the user's computer, check for its existence, and after reading the entire file, return all the strings as a list.

import 'dart:io';

List<String>? readCsvSync(String path) {
  // Create `File` object
  final file = File(path);
  // Check if file is ready to be read :)
  if (!file.existsSync()) {
    return null;
  }

  // Read lines sync and return them.
  return File(path).readAsLinesSync();
}

On this, our minimal program is ready, you can run it from the command line.

$ dart run bin/csv_reader.dart path/to/data.csv
id, title, type, count
1, "Citroen C3", Car, 2
2, "KTM 890 ADVENTURE R", Motorcycle, 4
3, "Jeep Avenger", Car, 1
4, "Polestar P1", Car, 3

Async reading

Working in synchronous mode is simple and straightforward, but from a program performance point of view, it is not always the best option, since it completely blocks the program from executing until the end of reading. What can we do about it? For example, we can use asynchronous reading! I will not go into the very concept of asynchronous work and how it is implemented in the Dart language, if you are not already familiar, then this will be your homework. Let's move on to solving our problem.

So, first, we need to change the interface of our program and method calls from synchronous to asynchronous. To do this, just add the await keyword before calling the method. But how can we call an async method inside a synchronous main()? I'm afraid not, but Dart gives us the ability to make the main() method asynchronous!

void main(List<String> arguments) async {
  if (arguments.isEmpty) {
    print("Usage: csv_reading path/to.csv\n");
    exit(1);
  }
  final path = arguments[0];

  final lines = await csv_reading.readCsv(path);
  lines?.forEach((element) => print(element));
}

Now our main() method will look like this. As you can see, not much has changed.

Now we need to implement the readCsv(String) method. First, we can no longer return a list of strings, asynchronous methods must return a Future object, which, in turn, will contain the necessary data. Also, we must mark our method as asynchronous, as we did with the main() method before, by adding the keyword async to its description. After that, we can use asynchronous file methods such as exists() and readAsLines().

// Wrap response in a `Future` object and mark function as `async`
Future<List<String>?> readCsv(String path) async {
  // Create `File` object
  final file = File(path);
  // Check if file is ready to be read :)
  if (!await file.exists()) {
    return null;
  }

  // Read lines sync and return them.
  return await File(path).readAsLines();
}

Still easy enough, right? Let's move on!

Async reading with Streams

One of the disadvantages of our program in its current form is that it reads the entire file, after which we can work with it. Yes, despite being asynchronous, we're still loading the entire file into memory, we're just doing it asynchronously. And although this will not be a problem for small files, if our program must process files of tens and hundreds of megabytes, this can become a problem: not every computer may have enough memory.

Dart has special classes that allow us to work with a stream of data by processing it on the fly, thereby saving memory and time. One such class is Stream. You can always read more about it in the official documentation and articles. For our program, 2 points are important:

how to create a Stream to read a file
how to return a Stream with a stream of strings

To achieve this, we need to make a few changes to our program. First, we need to change the description of our method so that Dart knows that it returns a Stream instead of a list of strings, to do this, we need to convert our method to a generator. This is easy to do with the async* keyword and changing the return type to Stream<String> along the way:

Stream<String> streamCsv(String path) async * {
    ...
}

Next, instead of reading the whole file, we need to open the stream for reading, like this: file.openRead(). But here's the catch: when reading this stream, it will return a stream of bytes to us, not lines; we don't want to work with bytes: it's the lines in the file that are important to us. What do we do? How to transform the stream in the way we need? For this, Dart has special classes StreamTransformer, they will help us perform transformations, namely: get characters from a set of bytes; split one endless stream of characters into lines, detecting the end of the line by the control characters \n and other.

// Don't forget to import `dart:convert` package
import 'dart:convert';
...

final stream = file.openRead()
    // Convert bytes to string
    .transform(utf8.decoder)
    // Split string into a lines
    .transform(LineSplitter());

Now that we have a stream of lines from a file, all we need to do is return them to the caller, but without blocking the program, as a stream, using await for and yield:

// Iterate over the stream
await for (String row in stream) {
    // return generated value from the our generator.
    yield row;
}

Excellent! All that remains for us is to learn how to listen to the stream and print the received data to the console. I think you yourself already know how to achieve this.

await for (final line in csv_reading.streamCsv(path)) {
    print(line);
}

Type detection

Awesome! Now we have a list of values, it remains only to determine their types! Let's proceed as follows:

first, trim all spaces at the beginning and end of our value
try to convert the value to an integer using int.tryParse(value)
if the received value is equal to null, then this is not a number :)
go ahead and try to convert to fractional double.tryParse(value)
if the received value is equal to null, then this is not a fractional number :)
check if our value is framed in quotechar and if so, cut them off, leaving only the value.
we collect values in the list and we return from the generator.

The algorithm is ready, let's write the code!

    ...
    final items = row.split(delimeter);

    // Iterate over each element in the items list
    final values = items.map((element) {
        // 1 trim spaces
        element = element.trim();

        // 2. Check if the value is int
        var ival = int.tryParse(element);
        // 3. Parsed successfully?
        if (ival != null) return ival;

        // 4. Try to parse into double value
        var dval = double.tryParse(element);
        // 5. Parsed successfully?
        if (dval != null) return dval;

        // 6. Check if the string is quoted
        if (element.startsWith(quotechar) && element.endsWith(quotechar)) {
            element = element.substring(1, element.length - 1);
        }

        return element;
    });

    // 7. Return final list
    yield values.toList();
}

Now you can check the return types and make sure it's not just strings anymore!

Fin

Great, the full source code for these examples can be found in the https://github.com/amka/csv_reading_article repository.

Server-side Dart

Andrey M — Mon, 03 Oct 2022 21:51:48 +0000

Disclaimer

Laska is under active development and is not supposed to be used in production. API may change dramatically in future versions.

Intro

It's not a secret that Dart's popularity comes from the Flutter framework and its acceptance by the community. I love Flutter as well, but what I miss is server-side. How cool it could be to be a full-stack developer by using only Dart language?

There was a time, I want to start a new project and have to choose what technologies to use for the frontend and backend parts as well. Research gets me to Aqueduct and Shelf, both of them weren't looking actively developing and supported and that leads me to the idea to make my own small micro-framework like Echo for Golang or Bottle for Python. And it was easy to decide: I've had time and motivation :)

And before we get started, I'd like to answer some questions that will definitely come up: why do we need one more framework, and what's the problem your framework resolves? The first one is easy: ask JavaScript developers! But OK, the real answer is competition: the more frameworks we have, the more we learn from each other and, eventually, we build better apps. The second answer: it was designed and built for micro-services and small applications. Sure, there is a way to extend it with middleware and extensions that come later, but as I said I treat it as a Dart alternative to Bottle or Echo. And when I say built I mean will be built :)

Architecture

Laska - that's how the project is named - is a micro-framework, it's not aimed to be a full-featured app like Django. Therefore the architecture is quite simple: every request is processed by the same process while performance is based on leveraging the async nature of Dart.

Let's briefly review how it works.

As we can see on the diagram, asynchronous server processing works like a charm :)

I did experiment with Isolates and multiprocessing, but finally, I decided it would require the developers to work with additional limitations. It is not the way I want to use any kind of software, so why does anyone should do it? Programming should be easy and fun therefore there is no kind of parallelism in Laska.

Let's build something

There is a trivial way to present programming languages and frameworks called 'Hello world'. Let's be trivial!

import 'package:laska/laska.dart';

void main() async {
  final laska = Laska();

  laska.GET('/hello/:name',
      (context) async => await context.Text("Hello ${context.param('name')}!"));

  await run(laska);
}

It's easy to understand what's going on here:

initialize a Laska object
add a handler for GET requests at the route '/hello/:name', where name is a placeholder for context parameters
code a handler that returns a string with a parameter given in the path
and run the server

That's it, an asynchronous server is up and running on http://localhost:3789.

More realistic example

Surely, 'Hello world' is not a kind of real-world application someone will deploy to production. The more realistic would be to build a server that logs user requests to the stdout and has routes that require authorization.

import 'package:laska/laska.dart';

// Custom middleware that checks user access.
class Acl implements Middleware {
  final allowedRoles;

  Acl(this.allowedRoles);

  @override
  Future<Function> execute(Function next, Context context) async {
    return (Context c) {
      // In this case it's simple check:
      // Does the request contains `role` header with `admin` value.
      final role = context.request.headers.value('role');

      // If the header's `role` is not in `allowedRoles`, reject the request.
      if (!allowedRoles.contains(role)) {
        context.Text('Role $role is not allowed.');
        return null;
      }
      print('Role $role is allowed.');

      // Don't forget to call the handler.
      return next(c);
    };
  }
}

// Custom middleware that prints request path and given prefix.
class Logger implements Middleware {
  String prefix;

  Logger(this.prefix);

  @override
  Future<Function> execute(Function next, Context context) async {
    return (Context c) {
      print('$prefix: Path: ${context.path}');

      // Don't forget to call the handler.
      return next(c);
    };
  }
}

void main() async {
  final laska = Laska();

  final acl_middleware = Acl(['admin']);

  // Add global middleware
  laska.Use(Logger('global'));

  // Create handler with per-route middlewares: logger and acl
  laska.GET('/secret', secretHandler,
      middlewares: {Logger('route'), acl_middleware});

  // Add route handler, only global middleware will apply
  laska.GET('/users', getUsers);

  // Add route with acl middleware, but only for the POST method.
  laska.POST('/users', getUsers, middlewares: {acl_middleware});

  await run(laska);
}

void secretHandler(Context context) async {
  await context.Text('You have access to secret path!');
}

void getUsers(Context context) async {
  await context.JSON([
    {'id': 1, 'name': 'Make something useful', 'status': 0},
    {'id': 2, 'name': 'Make new website', 'status': 1},
  ]);
}

I hope this code is self-explanatory but you can ask me any questions in comments :)

Roadmap

🅿️ - P is for planned.

✅ Dynamic routing with placeholders
✅ Middlewares
✅ JSON handling
✅ Form handling
✅ Null-Safety
🅿️ Logging
🅿️ Serve static files
🅿️ Template rendering?
🅿️ Extensions
🅿️ Health checks
❓ What's more?

The end

I'd love to see more server-side Dart projects and hope you do too. If you think so it would be very encouraging if you star the project on GitHub and like it on Dev.to.

How to hire people

Andrey M — Tue, 14 Jun 2022 07:58:41 +0000

Over the past 6 years, my job has been a lot to find the right people for my team, and in that time I've developed a set of questions and markers that help me quite easily determine whether a candidate is a good fit or not. Conventionally, these markers can be divided into several points:

Teamwork: I don't build solo teams, I assemble effective teams that can get the job done. Each member of the team should be able to communicate and at the same time not go into conflict, disagreements happen to everyone, but they need to be resolved peacefully;
The ability to convey your thoughts: working in a team on one project involves a lot of communication and the ability to explain your ideas, ask the right questions is critical;
The ability get things done: any task is of value only when completed, read “available to users”;
Involvement, interest: I do not want to educate everyone, I need people in the team who are interested in what they do, they themselves study the language / framework / database / other related technologies to make their projects the best on the market;

Teamwork

Communication is a mandatory skill when working in a team, as a good team resolves issues within itself and at the same time, discussions do not turn into conflict. But what makes a good team different from a great one? At a minimum, it is open to discussion not only internally, but also with external customers/executors. It doesn’t matter whether it’s a new product feature that seems overcomplicated and needs to be explained to the customer, or the API that the backend team implemented seems primitive to you and does not take into account the needs of your mobile team. (Teams are fiction, %username%). All members of such a team are open to discussions, they know how to discuss and will tell other members about what they think is important.

To find out about this quality, try asking the candidate about what was his role in the team? Who gave him tasks? Did he participate in the assessment of tasks, did he have to explain to customers or contractors what and why should be done, or vice versa, what should not be done?

The ability to convey your thoughts

Here it is important to understand how the candidate can convey his ideas to the interlocutor, whether he works with feedback, whether he is convinced that his interlocutor understood the idea as closely as possible. For example, an employee has a task to solve which he needs to assign a task to another developer. He describes it in JIRA, appoints the performer and ... that's it. Thinks the job is done. He may even try to explain it in a chat or by phone, but he forgets the key point: to make sure that the task is really understood as it stands? Or, understanding is far from the original goal.

How can you find out about this in an interview? Ask about whether the candidates assigned tasks to other developers? Were all the tasks done correctly the first time, or did you need a lot of clarifications in the process? What would he do next time? If we are talking about entry-level developers, then they, as a rule, do not set tasks, but are the final performers, however, even they must convey their thoughts to colleagues and team leaders. Can you ask them about what they did if the tasks were not clear? Have the requirements been successfully clarified?

Ability to get things done

Many at the beginning of their professional career quite often change jobs, projects, periodically declaring that they have reached their ceiling and they have nowhere else to develop. At the same time, the projects they were working on at the time of their departure may be far from complete, and they themselves, as part of their work in the company, have already changed more than one project, because they were bored with them.

I don't see it as a problem, it's normal when we're young and full of energy. There is so much energy that we cannot concentrate on one task for a long time, having launched the first prototype, we are already in a hurry to declare that the work is done and quickly switch to the next one.

However, as a rule, when searching, companies need programmers of “middle” and higher levels, which means that I expect people to be able to solve problems on their own and certainly not leave them halfway.

How to find out about this in an interview? Ask questions related to any completed tasks. Find out if a person has their own pet projects? Perhaps he developed some kind of internal project in the company where he worked? Maybe a friend's project where he helped with some part? This does not have to be software development, because here you are not interested in the qualities of a programmer, but in purposefulness.

Involvement, interest

When recruiting people to a team, we always aim to make this team stronger and more efficient in the long term. Of course, technical competencies play a key role, but let's just assume that they are absolutely suitable for us and leave this issue outside the scope of this article. So, how can you strengthen the team by hiring a new person? This may be the strongest technical specialist, maybe he has excellent analytical skills, maybe he studies everything related to his area of expertise and tries to bring new things to work, or maybe all at once and something else from above. One thing is clear, he is interested in his work and he is trying to make it even better by developing from one side or another. If so, feel free to hire!

How to know about it? Ask about what the candidate has learned during the six months/year; why did he study it? How does he find out about the latest in his field? Ask him what he changed in the work of his previous company, within his job or department?

Questions

These are just examples of questions, you can adjust them to suit your team.

Teamwork

What was your role on the team?
Have you ever had to explain why a task would take longer?
Have you assigned tasks to other people in the company?

The ability to convey your thoughts

Were there moments that you did not like? How did you try to solve them?

Ability to get things done

Do you have open projects on GitHub/Gitlab? What problems do they solve?
What products have you created or would like to create? It can be anything: an application, a book, a blog, music, etc.

Involvement, interest

What recent have you studied or read?
How do you find out about new technologies?

How to use it

Well, you have two options:

You can evaluate your current employees on these points - I mean those who you hired in the past.
If you are actively hiring employees, you can try evaluating them using this technique.

From Python to Dart - Day 2, Meet the dart CLI

Andrey M — Mon, 07 Mar 2022 15:37:39 +0000

The Dart language is unimaginable without the command-line utility (CLI) of the same name. This is a full-fledged tool that greatly simplifies the life of a developer in terms of its capabilities, far exceeding the built-in capabilities of the Python interpreter.

Among the dart features available are project creation, source code analyzing and formatting, and even publishing packages to pub.dev and more.

Bear in mind that the goal of this cycle is not a complete immersion in Dart from scratch, but a quick acquaintance for those who already know how to develop, in particular, in the Python language.

Projects creation

Python does not have built-in capabilities for automated project creation, everything has to be done manually: create a folder structure, describe dependencies in requirements.txt. Of course, there are third-party applications that make this process easier, such as poetry or Cookiecutter. However, they are third-party and require installation in a system or virtual environment. Dart has this feature built-in.

dart create

So, dart create is a CLI utility that can help you to create a project from the specified template.

$ dart create project_name

By default, this is a simple console application like dart-sass. However, this is not all. Using the -t option, you can specify which template to use for creation, it can be:

console-simple: A simple console application (basic template).
console-full: Console application with tests.
package-simple: A starting point for Dart libraries or apps.
server-shelf: Server based on shelf.
web-simple: Web application with core libraries.

When run, dart create will first create the project structure and then try to load all required libraries from pub.dev. This behavior can be changed by specifying the --no-pub flag when invoking the command.

Analogue from the world of Python: poetry new project_name

Analyzing and formatting

When working with several people on one project, it is very often necessary to use a single style of code design, writing comments, using variable names, etc. In the Python world, we use linters flake8, various formatters (black, yapf, autopep8) and mypy for type checking. How can Dart help meet these challenges?

dart analyze

The utility allows you to perform static analysis of the source code and point out errors and shortcomings.

By default, the call will run a check and indicate errors and warnings, indicating the need to respond to the info level with the --fatal-infos flag.

$ dart analyze [<DIRECTORY> | <DART_FILE>]

The behavior of the analyzer can be adjusted using the configuration file or comments in the code.

dart format

Using the command, we can style our source code according to the Dart guide.

$ dart format

This command will overwrite the files, formatting them "properly".

dart fix

$ dart fix

Applies automatic fixes to source code files, fixing two types of errors:

‎Analysis of issues related to automatic fixes (sometimes ‎‎called quick-fixes or code actions))
‎Issues related to package API transfer information‎

To see the changes, specify the --dry-run flag; to apply --apply; there is no default behavior for this command.

Building / Compilation

dart run

Launching a Dart application is extremely simple, just run the following command in the terminal:

$ dart run bin/myapp.dart

If you are inside a package and in the bin directory there is a dart file with the same name as the package name, then the application can be done without specifying the file:

$dart run

It is also possible to run applications from the packages specified in the dependencies to the current. For example, if your application has a dependency on the package foo, to run a program in this package, just call the command:

$ dart run foo

Or specify a different program inside the foo package:

$ dart run foo:bar

Arguments and flags

Often when developing, you need to pass arguments to the main() function, for this you need to pass them at startup after specifying the file:

$ dart run bin/myapp.dart arg1 arg2

You can also specify additional flags, for example, to debug the application:

$ dart run --enable-asserts bin/myapp.dart arg1 arg2

dart compile

The dart compile command allows you to compile a Dart program for the target platform. The output you specify with a subcommand can either include the Dart runtime or be a module (also known as a snapshot).

$ dart compile

exe - executable - A standalone, architecture-specific executable containing source code compiled to native code and a small Dart runtime.
aot-snapshot - AOT module - An architecture-specific file containing source code compiled to native code, but does not contain the Dart runtime.
jit-snapshot - JIT Module - An architecture-specific file with an intermediate representation of the entire source code, as well as an optimized representation of the source code that was running during the training run of the program. JIT code may have higher peak performance than AOT code, but it depends on the training run.
kernel - kernel module - A portable intermediate representation of the source code. More
js: JavaScript - JavaScript file with application. More

dart test

Every program needs testing, this will reduce the number of errors during development and improve the quality of the application. For Python, there is an excellent framework that simplifies the work with tests, writing, and executing them - Pytest. Running tests with it is extremely simple:

$ pytest

The output of the command is quite detailed and makes it easy to understand where and what went wrong when running the tests. Here's what it looks like:

Testing in Dart is done with the dart test command.

$ dart test

Several flags such as --name (-n), --tags (-t), or --exclude-tags (-x) allow you to control which tests will be run. If several flags are specified, then tests that satisfy all conditions at once will be executed.

Package management

dart pub

Python has a built-in pip utility that allows you to easily manage packages, install, upgrade, and remove them. For more control, there are also third-party tools like poetry. Dart also has a tool that makes it easier to work with external dependencies - this is dart doc.

$ dart pub

The possibilities of dart pub are much wider than installing and removing packages. With it, you can manage the local package cache, publish packages to pub.dev, etc.

For example, consider installing a package in Python:

$ python3 -m pip install django

This command will install the up-to-date version of the Django package, however, it will not write it as a dependency, which means that on a new installation, you need to learn about this dependency somehow.

The same can be done in Dart like this:

$ dart pub add shelf

In this case, the package shelf will be added to the project, specified as a dependency in pubspec.yml and loaded into the cache.

Analogs in Python: pip, poetry.

Documentation

dart doc

An important part of the development of applications and libraries is the documentation of functionality and source code. And for this, Dart has a special utility, which is extremely easy to run:

$ dart doc

Dart allows you to use comments and markup in your code to describe classes, functions, modules, and other structures. We'll look at these in more detail in a separate article, but for now, we'll mention that Dart handles special document comments. You can read about how to make documentation as effective as possible in the article Effective Dart.

Analogues in Python can be the generator Sphinx or pdoc, their capabilities are far beyond the capabilities of dart doc.

Conclusion

We have reviewed some of the commands available using the dart utility, some of them require a deeper understanding. However, even this cursory glance gives an idea of its capabilities and convenience available "out of the box" for the developer.

Next, we'll start diving into the Dart language and compare it to Python.

From Python to Dart - Day 1, Hello Dart

Andrey M — Wed, 02 Mar 2022 08:14:55 +0000

Many developers during their work develop in a certain area and do not always consider technologies that are on the periphery of their professional tasks. However, over time, the horizons begin to expand, developers of server applications begin to look towards client applications and vice versa; those who use interpreted languages look towards compiled ones; others are looking at completely different areas showing interest in the field of DevOps and others. To tame the interest of some of them, we'll talk about how the Dart language can help Python developers and why they need it.

About Dart

Dart is a compiled language born somewhere in Google more than 10 years ago. At some point in time, it was positioned as an alternative to JavaScript for developing client applications, later changing its direction towards a universal language for both client applications using Flutter and server applications.

Dart is an object-oriented, class-based language with a garbage collector that is inspired by C, C#, JavaScript, and many more. Dart applications can be compiled into binary code for both desktop x86 systems and mobile ARM processors; can be run in a virtual machine, thereby providing hot-reloading and, as a result, fast development; and even web apps can be implemented with Dart and Flutter.

Install Dart

Many OS users do not need any steps to use Python, it comes pre-installed on macOS, most if not all Linux and *BSD based distributions, and only Windows users will need to download and run the installer. Things are different with Dart.

The easiest way to try Dart is to use DartPad, an editor available online that allows you to write small applications.

To install Dart on a local computer, go to the site https://dart.dev/get-dart and follow one of the paths according to your operating system. So, for macOS users using Homebrew just use the command:

brew install dart

An alternative option would be to install Flutter, Dart will be installed as a part of it.

Dart CLI utility

After installation, the dart console utility will become available to you, with which you can perform many actions that help in development:

create new projects with dart create
run them in a virtual machine with dart run
compile to native code (ahead-of-time) using dart compile
format source code with dart format
generate documentation with dart doc
and much more.

When using Python, we are used to installing dependencies using pip or poetry packages, but can Dart offer something similar? The answer is yes, Dart comes with a dart pub utility that makes it easy to install, update, publish packages, and more.

Hello Dart

Getting to know Dart would not be complete if we did not try to write the simplest application in this language. Let's correct this omission.

// Define a function
void sayHi(String name) {
   print('Hello, $name.'); // Prints a message to the console.
}

// With this function, the application starts its work.
void main() {
   var name = 'Pythonista'; // Define and initialize the variable.
   sayHi(name); // Call the function.
}

As you can see, a Dart program starts its execution from the main function. In it we declare a variable name, its type will be automatically deduced based on the assigned value. After that, we call the function, passing the variable into it. Unlike Python, Dart does not rely on indentation and uses curly braces to separate blocks of code, as well as semicolons to indicate the end of executable statements. In the following chapters, we will look at the language in detail in light of how it compares to Python.

What's next?

We will learn how to create projects using the dart utility and consider its capabilities in detail.

What's new in Norka 1.0

Andrey M — Tue, 22 Feb 2022 13:16:28 +0000

Nearly two years ago, Norka was born, a note-taking application made specifically for elementary OS and also distributed via Flathub. This version was far from version 1.0, its functionality was limited only to essential things: editing, searching, autosaving. Later, it introduced document search, export to various formats, spell checking, convenient keyboard shortcuts for editing, the ability to preview documents in HTML and statistics, etc. This was enough to start, but there was room for improvement. One possibility might be the ability to group notes in a folder and structure the user’s resources in a certain way. So what’s new comes in version 1.0?

Folders

The main and most important innovation is the ability to structure documents using folders. Folders can be created by clicking on a button in the header bar or by dragging documents onto each other. In this case, you will see a window displaying a suggestion for a folder name.

Folders can be moved from one to another. The level is not limited, but there is a limit on a path length, which, by the way, are found under the title of the window in the title. Also, some characters cannot be used in the names, we plan to fix this in the next releases.

The backup function also includes the structure of the library and exports documents by putting them in the right folders. This way you will get a complete copy of the library on disk.

New fonts and updated theme

We continue to work on using Norka not only in terms of functionality but also in terms of UI. Starting with version 1.0 Norka will use the iA Writer Duospace font. Thank you for sharing them with the community. The color scheme of the editor has also been updated.

Actions

In many desktop environments, it is possible to set up global hotkeys to trigger specific actions in applications. For example, take a screenshot or share a file. Now you can use the command to quickly take notes with Norka.

flatpak run com.github.tenderowl.norka --new="Quick Note"

This action can also be implemented as a command to call from hot corners in GNOME or elementary OS.

Specifying the language for spell checking

In one of the latest releases, we switched from GtkSpell to use GSpell, but at the same time, Norka lost the ability to specify which language to use for this check. And while this isn’t a problem if you’re writing in English, it creates problems for writers in other languages. This setting can now be changed in the application.

Import and formatting fixes

As with spell checking, one might not have noticed that for non-Latin languages, hotkeys are used to format text, leading to unexpected results. For example, when inserting a title, some of the text could be erased. Now we have fixed this problem, Norka correctly inserts formatting without text loss.

We also fixed auto-completion of lists: when pressing Enter, Norka will check if an item text has been entered, and if not, then inserting the list formatting ends.

For those who use drag-n-drop to import, the problem turned into the fact that when importing several files in sequence, the documents / those that were used the first time that time were re-imported instead of the last ones. We have fixed this issue, there is no more reason to worry about erroneous imports and prevent the deletion of redundant copies.

Conclusion

As always Norka available on the elementary AppCenter and Flathub.

We keep improving Norka even further. We aimed to become the best writing app and note editor for Linux in the future, and possibly not only a Linux.

Thanks to everyone who uses Norka!

How to use elementary OS Contractor to simplify your daily routines.

Andrey M — Sat, 23 Oct 2021 21:09:58 +0000

Intro

Almost two years ago I lost my iMac and it brought me an idea to see what's changed in the Linux world for 10 years. Starting from Ubuntu and Fedora I finally came to the elementary OS project's website. And it was quite astonishing. In comparison to the other distributions elementary had its view on how the operating system should view, how to make apps, its own design language and developers documentation. Thereby the decision to move to this OS was easy.

For now, it is almost two years since I moved from macOS to elementary OS as my daily driver. And, as I said earlier, I'm a developer. After looking for a native text editor I made myself think to make Norka. But, this article is about the distinct application. Actually, I'm not the author of it, the app is already a part of elementary itself - Contractor.

Contractor

The idea is very simple: users can write a contract - a file which instructs the Contractor how to call the command - and it comes available in any supported apps: Files, Photos, etc.

Action

I suppose you're already got the idea of how the Contractor can help you in your daily work, but let's make a contract that... well.. help you share any file via Telegram. What do we need for it?

install Telegram
get the command
create a contract
test it!

Because it differences in one case of installation on another I will write for the Flathub version.

Let's dive in!

Install Telegram

As of elementary OS user, I can simply go to flathub.org and press the "Install" button. Sideload app do the job. But what about other distros? Well, the right way is completely covered on the Flathub site so we don't wanna go through all steps :)

Get the right command

To write a good contract we need to find out what command does the job we need. In some cases, it could be easily extracted from --help info or man pages. Luckily Telegram command-line switches are fully described in the GitHub Wiki: https://github.com/telegramdesktop/tdesktop/wiki/Command-Line-Switches. -sendpath <file> - the desired switch.

One part is done, let's figure out the second one. To run the application with a command-line switch installed via Flatpak we have to call flatpak run command. Thus our command will look like this:

flatpak run org.telegram.desktop -sendpath %f

This is already enough to make a contract!

Contract

Every contract should be placed inside ~/.local/share/contractor if we talking about a specific user or inside /usr/share/contractor for the system-wide availability.

Simple .contract file example:

[Contractor Entry]
Name=Mount
MimeType=application/x-cd-image;application/x-raw-disk-image
Exec=gnome-disk-image-mounter %f

This example shows how to make a command that will mount disk images to the filesystem. We need something different.

Create telegram-share.contract file and open it in Code or your text editor of choice.
Change Name to Share via Telegram and Exec field to a command we discovered earlier. If English is not your primary language you can add localized Name by adding Name[language code] option. For example:

Name[ru]=Поделиться в Telegram

Last but not least we have to set what mime-types has to activate the Share command. Of course, it doesn't mean to be only disk images
and here is the special type - !inode - which means any file you select no matter archive it or pdf.

Let's see what we've got!

[Contractor Entry]
Name=Share via Telegram
Name[ru]=Поделиться в Telegram
Icon=telegram
MimeType=!inode;
Exec=flatpak run org.telegram.desktop -sendpath %f

Now save your contract and test it by clicking on any file in Files and pressing the "Share via Telegram" option.

More examples listed in the Contractor repository.

Bonus

Notification

Sometimes you wanna indicate to yourself when the contract will be completed. To make it happen it's not enough to call just one command, you need to send a notification somehow. Again, elementary already has an application for it named notify-send, and all we need is to combine all the commands into one with help of sh. As you may see in the Tips section it is easy enough:

Exec=sh -c "flatpak run org.telegram.desktop -sendpath %f && notify-send 'File sent' '%f successfully sent via Telegram'"

Final version:

[Contractor Entry]
Name=Share via Telegram
Name[ru]=Поделиться в Telegram
Icon=telegram
MimeType=!inode;
Exec=sh -c "flatpak run org.telegram.desktop -sendpath %f && notify-send 'File sent' '%f successfully sent via Telegram'"

Install .deb packages

[Contractor Entry]
Name=Install app
Name[ru]=Установить приложение
MimeType=application/vnd.debian.binary-package
Description=Quickly install .deb package
Exec=sh -c "pkexec apt install %u && notify-send 'the App installed' -a Apt"

Tips:

Use pkexec to ask for root permissions. Example:

  Exec=pkexec chmod +x %U

To call multiple commands at once try to use sh:

  Exec=sh -c "echo 'step 1' && notify-send 'Done' && echo 'step 2'"

How to use WebSockets with Python and Gtk+

Andrey M — Mon, 05 Oct 2020 23:26:31 +0000

Hey there! I'm here to present you an amazing trip to the native apps with WebSockets! In this current case we will be using these technologies:

Python
GTK+
Libsoup
Websocket messaging

If you're wondering how to build a native GTK+ chat app, let's dive with me!

Theory

WebSockets is a protocol designed to provide a consistent connection between the client and a server where both can send data to each other. It's like a wire over the Internet or a tube, distinct of regular HTTP, where the client only can send data to the server and it gets a response immediately.

Benefits of this approach are quite obvious: the server can push the data to the client when it comes to server from another client or generated somewhere on the backend. And the client doesn't need to refresh the page or do something to fetch new data, it just comes to the client by itself.

More information about WebSockets you can find on the websocket.org.

What I want to show you in this article it is how to connect to a WebSocket server and send or receive data from it in a native GTK+ application.

I will code my app in elementary OS using GNOME Builder, but the same logic should work anywhere where GTK+ and libsoup are available and all code could be easily adapted even for macOS.

UI

The app logic is quite simple yet representative. The UI will consist of two screens (Gtk.Grid) placed in Gtk.Stack. The first screen contains widgets required to connect to the server such as Gtk.Entry for server address, button to initiate a connection and a spinner to show the state.

The second screen is more complex. Purpose of this is to enter the message, send it to the server and show the server's response in Gtk.TextView. Thus we need Gtk.Grid to place widgets. Gtk.Entry and Gtk.Button the same way we did it on the first page. And to display log we need Gtk.TextView placed within Gtk.ScrolledWindow in case there will be much more logs than the window can contain and the scrolling will be as much useful feature as it could :)

Connection page

Let's start building! Create a new project in Builder, as the language, we will use Python 3.6+.

IDE will generate a base app structure with all we need, and all we need is just two files: window.ui and window.py.

Firstly, we need a correct UI for our app, so open window.ui. file and replace the "hello world" Label with Gtk.Stack. We will need two pages.

Name the first screen "connection", and place onto it Gtk.Grid with 3 rows and columns. In the central cell place Gtk.Box with 4 rows:

Gtk.Label with text "Connection"
Gtk.Entry. Set its id to "host_entry"
Gtk.Button with id "connect_btn"
Gtk.Spinner. Call it whatever you like, mine is just a "spinner" :)

That's enough for the "Connection" page.

Chat page

Moving further. The second screen is a bit more complex. Again, we need Gtk.Grid to put all the widgets we need. But for now, it will be a grid with just 2 rows and 2 columns.

First row with two widgets in its own cells:

Gtk.Entry with id "message_entry"
Gtk.Button with id "send_btn"

On the second row place Gtk.ScrolledWindow, no id required because we don't need to call its method. Inside this ScrolledWindow put a new Gtk.TextView widget. Set its id to "log_view".

To make it looks more convenient, set width = 2 in the container's props inside attribute editor for ScrolledWindow.

Logic

Ok, out UI is ready enough to build some logic for it, finally :)

Open window.py and add class vars to connect with widgets from the .ui file.

# Stack with pages
screens = Gtk.Template.Child()

# Connection page widgets
host_entry = Gtk.Template.Child()
connect_btn = Gtk.Template.Child()
disconnect_btn = Gtk.Template.Child()
spinner = Gtk.Template.Child()

# Chat page widgets
send_btn = Gtk.Template.Child()
message_entry = Gtk.Template.Child()
log_view = Gtk.Template.Child()

# Declare some class-vars
self.session = None
self.connection = None

Well, now we are able to call methods of these widgets. But also, we have to handle its signals. Let's connect "connect_btn":

def __init__(self, **kwargs):
    # Some app logic

    self.connect_btn.connect('clicked', self.on_connect_clicked)

def on_connect_clicked(self, widget):
    # Check if there is a text inside the host_entry
    # and grab focus if its empty
    if not self.host_entry.get_text():
        self.host_entry.grab_focus()
        return

    # Show user we are trying to connect
    self.spinner.start()

    # Init libsoup Session, create message and start connection
    self.session = Soup.Session()
    msg = Soup.Message.new("GET", self.host_entry.get_text())
    self.session.websocket_connect_async(msg, None, None, None, self.on_connection)

The code above is quite straightforward:

Get the server address
Create new Session
Init the connection with websocket_connect_async

As a callback for connection function, we put on_connection method, which takes the result of this operation and finish the process.

def on_connection(self, session, result):
    try:
        # Finish connection process
        self.connection = session.websocket_connect_finish(result)

        # If we here, the connection went correctly
        # Connect `message` handler to the connection
        self.connection.connect('message', self.on_message)

        # Show to user all is OK and switch to the Chat page
        self.screens.set_visible_child_name('chat')
        self.disconnect_btn.set_visible(True)

    except Exception as e:
        # In case something goes wrong just print an exception
        print(e)
        self.session = None

    finally:
        # Don't forget to show a user that process is finished.
        self.spinner.stop()

We are almost done! All we need to do more is to handle click event from the "send_btn" and display messages in the "log_view".

def on_message(self, connection, msg_type, message):
    msg = f'<b>RECEIVED:</b> {message.get_data().decode()}\n'
    self.buffer.insert_markup(self.buffer.get_start_iter(),
                              msg,
                              len(msg))

Could it be more simple than that? 😉 Just to display a message in a more readable way we add some Pango markup and use insert_markup method of Gtk.TextBuffer to... insert markup!

Last, but not least required thing is a handler for "send_btn" signal.

def on_send_clicked(self, widget):
    # Get the message from the Entry
    msg = self.message_entry.get_text()

    # If there is no message - grab focus.
    if not msg:
        self.message_entry.grab_focus()
        return

    # Send a text to the server.
    self.connection.send_text(msg)

For our simple case, all we need is just the send_text method. But libsoup could do a lot of different stuff, such as send_binary or emit a signal if something goes wrong.

Conclusion

Simple yet descriptive example of how to start building your GTK+ app with WebSockets inside. Maybe you will create a new chat app?

Stay tuned if you want to read more! Or go to the docs from the Links section.

Anyway, good luck!

Links

Source code:
https://github.com/amka/pygobject-gtk-websocket-app

Docs: