DEV Community: Tsuyoshi Chujo

Crop images with your own designed UI using "crop_your_image" Flutter package

Tsuyoshi Chujo — Tue, 16 Mar 2021 13:00:54 +0000

When you are thinking of building functionality to crop images in your Flutter app, you would search pub.dev and find several Flutter packages, such as image_crop, image_cropper, etc.

In this article, I would like to give you one more choice here,
crop_your_image which is developed by ME.

What is crop_your_image

crop_your_image is a Flutter package which enables you app developers to embed functionality of cropping images in your apps: typically needed in "Edit Profile Image" pages or "Upload Image" pages, etc.

Though I know we already have some nice package to build such pages, I believe one more package with different approach would help someone who are not satisfied in existing packages.

crop_your_image's Approach

The biggest policy of crop_your_image package is provide controller, not UI.

As far as I have researched, most image cropping package provides both cropping feature and UI to determine the area of cropping images.

Yeah, it would be quite helpful as app developers can embed image cropping functionality into their apps with only writing a couple of lines of codes.

On the other hand, however, I also believe that some need to build such functionality with their own UI designed with their own brand image.

Considering that kind of use-cases, providing fixed UI, even though the UI can be customized by passing parameters to change color, text, size, etc., prevent app developers from keep consistency of UI design.

crop_your_image's approach is to provide Crop widget which is controlled by using CropController and DON'T provides Widgets to manage this controller. For example, you can just call CropController.crop method from your own Widget to execute cropping images with rect that user selected.

Sample program

Here is some sample programs.

What app developers have to do is simply place Crop widget at wherever on the widget tree they want to place.

@override
Widget build(BuildContext context) {
  return Container(
    width: double.infinity,
    height: double.infinity,
    child: Crop(
      image: _originalImage,
      onCropped: (croppedImage) {
        // do whatever you want with cropped image
      },
    ),
  );
}

image property is an original image data with type of Uint8List, which can be from image file in assets folder or from network possibly depending on each apps' implementation.

Crop widget will display the given image and interactively resizable cropping area on users' screen.

Once image is cropped, onCropped callback is called with cropped image data with type of Uint8List also.

But how to execute cropping? CropController is available here.

@override
Widget build(BuildContext context) {
  final controller = CropController();
  return Container(
    width: double.infinity,
    height: double.infinity,
    child: Crop(
      image: _originalImage,
      onCropped: (croppedImage) {
        // do whatever you want with cropped image
      },
      controller: controller,
    ),
  );
}

CropController has several methods such as crop() to execute cropping the image with currently selected area, or cropCircle() if you want images cropped with circle shape.

What app developer do is just call the methods at anywhere like onPressed callback of ElevatedButton like below.

ElevatedButton(
  child: Text('Crop it!'),
  onPressed: () => controller.crop(),
),

As ElevatedButton is a widget provided by flutter framework and can be designed whatever you like, app developers can embed Crop widget of crop_your_image without breaking the consistency of your own design.

Other Features

crop_your_image has more features such as fixing aspect ratio, cropping with circle shape, etc. and the details are explained on README.md of the package.

Because crop_your_image is just started developing a couple of days ago, new features can be added day by day.

If you are interested in the package and need features that are not implemented yet, I'm looking forward to receive issues or comments on GitHub.

Summary

crop_your_image is a brand-new (meaning still alpha) Flutter package that provides "cropping images" functionality to your apps.

Comparing to existing packages, crop_your_image provides minimum UI so that app developers can embed Crop widget keeping consistency of UI design.

crop_your_image also available on multi-platforms because it does NOT use native code (Swift / Kotlin) via PlatformChannel and depend only on image package which is 100% built with Dart.

I'll be very happy if you try crop_your_image and give me any feedback. Thanks.

Thank you for reading my introduction to crop_your_image Flutter package.

As I'm not a native speaker of English, some expression would be strange and give you confusion, I guess. If you have anything unclear, just leave comments below and I’m glad to discuss.

Do you code `if (foo == true) ` in Java?

Tsuyoshi Chujo — Tue, 20 Feb 2018 09:23:31 +0000

There posted the discussion that "Do you code if (foo == true) in Java?" on Qiita, Japanese tech blog.

https://qiita.com/ikemo/items/4f56a283f9e27cf98d81

The auther argues that it's "No" because its verbose (if (foo) is enough), it may cause typo that if (foo = true) and it would increase the number of steps and run slower.

So, the code should be like this.


if (foo) {
    // do something
}

boolean isBuzz = !obj.getFoo().getBar();
if (!isBuzz) {
    // do something
}

and not


if (foo == true) {
    // do something
}

if (obj.getFoo().getBar() == false) {
    // do something
}

However, there posted many counter arguments that ! operator can be easily overlooked, == true is easy to understand, both ways are acceptable, etc.

Basically, I'm for the author's opinion. == true doesn't provide any advantage for readability and simply if (isSuccessful()) is comfortable to pronounce.

How do you think of this?

Thanks.

How Do You Teach Yourself After Reading Books for Beginners?

Tsuyoshi Chujo — Thu, 25 Jan 2018 10:09:31 +0000

When thinking about the situation that you are willing to work with a programming language which is new to you, what will you do to teach yourself?

Most of you will read some books written for beginners, or will go to some tutorial site of the language. You may sign up to some code challenge sites such as codewars.

I am totally positive to do so and I do too. However, even if you finish everything above, you may still be worrying that "Can I do well with this knowledge in the real job?"

Now, I would like to ask yow how do you teach yourself after finishing those works for beginners.

Code Reviewing

I will introduce my answer to the question above, that is to ask someone, who are working with Ruby already, to review your code and discuss what code is nice and what code is not looking at YOUR code.

In the job, it is extremely important that you can explain why you wrote this code, because there is no absolutely nice code.

What programmers have to do in the real work is to think of the best code within the specific situation you are facing, and what beginners have to learn is how they write suitable codes considering each situations.

The problem here is that we need experiences for "considering each situations", which beginners don't have of course. Thus, code reviewing and feedback from the experienced is necessary.

CodeYourRuby

I would like to introduce CodeYourRuby which I opened as a GitHub repository.

CodeYourRuby is a place where beginners of Ruby can ask the experienced Rubyists to review their code.

By making Pull Requests of codes which satisfy the specifications of assessments committed to CodeYourRuby repository, the experienced Rubyists review them on the Pull Requests by practical point of view.

Benefits for beginners

As mentioned above, the Ruby learners can discuss with the experienced Rubyist looking at the same code, yours, and the discussion will make them think about and know nice Ruby-like code more and more. That is the biggest benefit for beginners.

The assessments are not very complicated, which can be implemented with a couple of classes and tests, so they can easily start coding, but not too easy to finish in a couple of minutes or so.

Benefits for reviewers

You may think that who, the experienced Rubyists, would join CodeYourRuby as a volunteer. Yeah, it's true that CodeYourRuby has one big problem that it doesn't have enough reviewers and Pull Requests are left without any comments.

However, that does not mean reviewing on CodeYourRuby is meaningless for reviewers.

Reviewers can discuss with other reviewers. By discussing with not only the beginners but also the other experienced Rubyists, they can find new knowledges or ideas about Ruby. As they cannot say they know everything about ruby, it is useful to join the discussion.

In addition, especially for those who does NOT have enough chance to be a reviewer in their job, CodeYourRuby is the awesome place to practice reviewing.

Therefore, even if they have already worked with Ruby and familiar with Ruby, joining code reviews on CodeYourRuby will work them positively.

Summary

As I discussed so far, joining code reviews is very important for both the beginners and the experienced.

CodeYourRuby can provide chances of code reviews for everyone for free if they are looking for ones.

As the idea of CodeYourRuby can be reusable with some other language or some other community, I will be happy if repositories with the idea of CodeYourRuby are created more and more. Also, I will be happy if more and more Rubyists join discussions on CodeYourRuby.

* Note that CodeYourRuby is only for Japanese right now. I will work hard for translation if I get a lot of positive responses from the readers of this post. (So I'll be grad if you "like" this post or "star" CodeYourRuby repository, thanks.)

Understand the basic idea of HTTP based on TCP

Tsuyoshi Chujo — Wed, 24 Jan 2018 08:20:14 +0000

HTTP is the most used technology now and indispensable for all the web services.

We can easily send HTTP requests with HTTP client libraries we like, or can easily run HTTP servers with whatever languages and frameworks we like. We don't need to think about what is happening in the libraries or frameworks.

However, I believe that understanding the basic idea of HTTP would be useful for many programmers, when thinking of what HTTP header should be added or thinking of what is HTTP/2 for example.

In this post, I'm going to explain how HTTP works, starting with running TCP socket programs.

Tiny TCP socket programs

Let's start with taking a look at TCP, which is underlying HTTP, with a tiny TCP socket program.

The ability of TCP is quite simple, send / receive data as byte stream. There is no data format, no end of data, no rule for timing of sending data. Thus, client can send whatever data to the server at whenever it wants, and vice versa.

Here is sample Ruby programs of TCP server / client, both of which can send data, input from keyboard, and output data, received from the other.

# server.rb

require 'socket'

port = 20000

server = TCPServer.new(port)
socket = server.accept

Thread.new do
  loop do
    data = socket.gets
    p data
  end 
end 

loop do
  data = gets
  socket.print(data)
end

# client.rb

require 'socket'

host = '127.0.0.1'
port = '20000'

socket = TCPSocket.open(host, port) 

Thread.new do
  loop do
    data = socket.gets
    p data
  end
end

loop do
  data = gets
  socket.sendmsg data
end

You can check how they work by opening two terminals and running each scripts above.

$ ruby server.rb

$ ruby client.rb

* Note that server.rb must be run first because client.rb expects to the server already run.

You can type any letters you want. When you type Enter key, you may notice that both client and server can send / receive data each other at any time.

Communication using HTTP

Now, let's take a look at how HTTP clients send HTTP requests, using the previous client.rb program.

Before going ahead, we need a simple HTTP server as a sandbox.

In theory, we can build HTTP server program by extending server.rb program above, but it's too challenging to do within this post.

Instead of building HTTP server program by ourselves, WEBrick::HTTPServer in Ruby is available as HTTP server in localhost. Just copy & paste the CLI command below, and run it to start a HTTP server.

$ ruby -rwebrick -e 'WEBrick::HTTPServer.new(:DocumentRoot => "./", :Port => 20000).start'

The goal of this section is to send HTTP requests to the sandbox server above and receive 200 response with nice response body by sending appropriate data with client.rb program.

Format of HTTP request

As we saw in the previous section, communication between client and server with TCP socket does not have any rule about sending / receiving data.

HTTP, which is based on TCP, is one of the protocols which provides the specification of "How server and client communicate each other". In other words, HTTP defines the data format, timing to send data, when to close connection, etc.

You can check specifications in detail on RFC 7230. (I am also trying to read this page to write this post)

Let's start with the first line of request. As defined section-3.1.1:RFC 7230, HTTP method, request target and HTTP protocol version appear on the first line, with the format below.

method SP request-target SP HTTP-version CRLF

If we want to send GET request to the root path with HTTP/1.1, for example, the first line should be like this.

GET / HTTP/1.1

So let's try to send the data above using client.rb.

Run client.rb and type the strings above.

$ ruby client.rb
GET / HTTP/1.1

Then, press enter key twice and you would get HTTP response with response code 200.

"HTTP/1.1 200 OK \r\n"
"Content-Type: text/ html; charset=\"UTF-8\"\r\n"
"Server: WEBrick/1.3.1 (Ruby/2.4.1/2017-03-22)\r\n"
"Date: Tue, 23 Jan 2018 13:33:51 GMT\r\n"
"Content-Length: 9173\r\n"
"Connection: Keep-Alive\r\n"

Cool! We could send HTTP request to the server successfully with simple, tiny, toy TCP socket program.

Receiving HTTP Response

Now, take a closer look at when the server sends response to the client.

Remember that you pressed enter key twice when you send a HTTP request, even though the first line ("GET / HTTP/1.1") had been sent right after the enter key was pressed once.

It is because the server is supposed to return response after the client finishes sending all the data. Therefore, the server has to evaluate that it has received entire data by looking at the data itself according to specification of HTTP protocol.

The entire HTTP request format is defined like this. (See section-3:RFC 7230)

HTTP-message = start-line
*( header-field CRLF )
CRLF
[ message-body ]

You may notice that header-field is supposed to follow the first line, so the server cannot response before making it clear header-field is over. In other words, the server calculates the end of header-field with receiving double CRLF. (see CRLF appears at the end of header-field first and again in the next empty line)

That is why the HTTP server sent response to the client after pressing enter key twice, which means header-field is empty and the request message is over here.

Apart from Keep-Alive header introduced in HTTP/1.1, HTTP connection would be closed after sending response from server to client once. (appendix-A.1.2:RFC 7230)

In HTTP/1.0, each connection is established by the client prior to the request and closed by the server after sending the response.

You can try to send data again after receiving responce, and you may soon notice that the connection is already closed. (socket.sendmsg returns nil repeatedly)

A HTTP connection is over here and you must start with connecting to the server again.

Summary

We experienced connecting to HTTP server with TCP socket program in this post. It is clear now that HTTP is based on TCP connection and introduces common rules of how to use TCP for efficient communication between web applications and clients (Mobile app, CLI programms, etc).

Please note that the information about HTTP protocol introduced in this post is only a couple of features of HTTP protocol. To understand HTTP in practice, you need to know much more, such as roles of request headers, connection management (such in Keep-Alive header), or other things stated in the RFC documents.

Hope this post will help you understand the first step of how HTTP works.

Problems you faced on developing globalized web services

Tsuyoshi Chujo — Wed, 24 Jan 2018 00:51:02 +0000

Hi,

I'm now researching how to globalize web services suitably, and I want to find out as many possible problems on globalizing web services as possible.

Have you faced any problems (not only technical but also cultural, religious, linguistic, etc.) when you are developing web services targeting global audiences? If so, how did you solve them?