Terminal EditorsnFornRuby Core Toolchain

:author

ITOYANAGI Sakura

:theme

.

: content-source

RubyKaigi 2019 Fukuoka

:allotted-time

40m

: start-time

2019-04-18T13:30:00+09:00

: end-time

2019-04-18T14:10:00+09:00

Greeting

Hello, everyone!

Greeting

Welcome to Fukuoka, Japan!

Let me introduce myself

I'm

Let me introduce myself

I'm so tired because this is first session just after keynote.

Let me introduce myself

# image
# src = japan.png
# relative-height = 80
# caption = Dark green area is Kyushu
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Let me introduce myself

# image
# src = japan_fukuoka.png
# relative-height = 80
# caption = RubyKaigi venue is Fukuoka
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Let me introduce myself

# image
# src = japan_fukuoka_nagasaki.png
# relative-height = 80
# caption = I was born at Nagasaki
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Let me introduce myself

# image
# src = japan_fukuoka_nagasaki.png
# relative-height = 80
# caption = How strange shape the arrows are
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Let me introduce myself

# image
# src = japan_fukuoka_nagasaki.png
# relative-height = 80
# caption = Both are almost the same culture area
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Let me introduce myself

# image
# src = setchan.jpg
# relative-height = 80
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

  Both eat ((tonkotsu)) ramen

Let me introduce myself

# image
# src = blackmontblanc.jpg
# relative-height = 80
# caption = Black Mont Blanc
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Let me introduce myself

# image
# src = blackmontblanc.jpg
# relative-height = 60
# caption = This is the greatest soul food of Kyushu people
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Let me introduce myself

# image
# src = blackmontblanc.jpg
# relative-height = 40
# caption = White ice cream is covered black chocolate and crunchy chips in perfect balance
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Let me introduce myself

# image
# src = blackmontblanc.jpg
# relative-height = 20
# caption = All children in Kyushu are raised on Black Mont Blanc and everyone love it, Black Mont Blanc is nice so Kyushu is nice
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Community: Asakusa.rb

# image
# src = asakusarb.jpg
# relative-height = 70
# caption = Asakusa.rb is holding every Ruby Tuesday
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Community: Asakusa.rb

# image
# src = asakusarb.jpg
# relative-height = 70
# caption = Many speakers of RubyKaigi 2019 are from Asakusa.rb
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Company:nSpace Pirates, LLC.

# image
# src = space-pirates-logo.svg
# relative-height = 70
# caption = Space Pirates, LLC.
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Company:nSpace Pirates, LLC.

# image
# src = space-pirates-logo.svg
# relative-height = 70
# caption = I'm an Elasticsearch specialist in this company
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Company:nSpace Pirates, LLC.

# image
# src = space-pirates-logo.svg
# relative-height = 70
# caption = I don't know Elasticsearch but I'm using kind of go with the mood
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Hobby: climbing

And, my hobby is climbing.

Hobby: climbing

I always go climbing when Ruby conferences.

Hobby: climbing

# image
# src = Anatomy_TFCC.jpg
# relative-height = 80
# caption = But I got an injured TFCC by hard training
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Hobby: climbing

# image
# src = RIMG0301.jpg
# relative-height = 80
# caption = Camp in a gorge at last weekend
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Hobby: climbing

# image
# src = wrist.png
# relative-height = 80
# caption = It's a prosthetic finger for climbing
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Hobby: climbing

# image
# src = RIMG0350.jpg
# relative-height = 80
# caption = Climbing with prosthetic finger
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Hobby: climbing

# image
# src = RIMG0471.jpg
# relative-height = 80
# caption = Camp in a gorge at last weekend
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Hobby: climbing

# image
# src = RIMG0488.jpg
# relative-height = 80
# caption = Camp in a gorge at last weekend
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Hobby: climbing

This type of injury has so hard problem, it's “I can't turn my humerus”.

Hobby: climbing

# image
# src = Richard_Stallman.jpg
# relative-height = 80
# caption = It's natural position of humerus
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Hobby: climbing

# image
# src = RMS_typing.jpg
# relative-height = 80
# caption = It's typing position of humerus
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Hobby: climbing

“I can't turn my humerus”

vs

Typing position with turning my humerus

Hobby: climbing

I'm still getting over the injury and I've gotten a lot better now.

Hobby: climbing

But I couldn't turn my humerus in the early days. It is effectively sentencing a programmer to death.

Hobby: climbing

In the severe situation, I felt I had to choose.

Hobby: climbing

I should:

Hobby: climbing

I should:

Terminal EditorsnFornRuby Core Toolchain

Terminal EditorsnFor Ruby Core Toolchain

# image
# src = mannequin.jpg
# relative-height = 80
# caption = First, I got...
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Terminal EditorsnFor Ruby Core Toolchain

# image
# src = mannequin_1.jpg
# relative-height = 80
# caption = TFCC injury
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

GNU Readline

Ruby has one big problem when installing, it's about GNU Readline.

GNU Readline

GNU Readline is a line editor software. For example, you always use it on shell.

GNU Readline

Ruby has (({readline})) standard library, and it's based on GNU Readline as a native library.

GNU Readline

If you build and install Ruby without installing GNU Readline as a linkable files:

GNU Readline

GNU Readline

It's a very sad situation and a hard trap for beginners.

GNU Readline

And user including me needs to re-build Ruby, it means I need to type keyboard more.

GNU Readline

# image
# src = mannequin_1.jpg
# relative-height = 80
# caption = It's worst case for my wrist
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

GNU Readline

So I started to develop a GNU Readline compatible library by pure Ruby for Ruby core.

GNU Readline

I had a plan to explain terminal technologies in this session but now…

GNU Readline

# image
# src = textbringer.png
# relative-height = 60
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Now, an unprecedented boom in text editor.

GNU Readline

# image
# src = textbringer.png
# relative-height = 60
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

You can listen to terminal techniques in this session tomorrow.

GNU Readline

I developed ((Reline)) what is as a GNU Readline (almost)compatible library by pure Ruby.

GNU Readline

Reline's development policies are:

GNU Readline

Reline's development policies are:

GNU Readline

Therefore Reline uses:

GNU Readline

Therefore Reline uses:

ANSI escape code

ANSI escape code is a standard specification to control the cursor location, color, and other options on terminal.

ANSI escape code

If a terminal supports ANSI escape code, softwares control unified escape code.

ANSI escape code

Example:

# enscript ruby
puts  "\e[31mred"
puts  "\e[32mgreen"
puts  "\e[34mblue"

ANSI escape code

Example:

# enscript ruby
puts "\e[31m"    + "red"
puts "\e[32m"    + "green"
puts "\e[34m"    + "blue"

ANSI escape code

Example:

# enscript ruby
puts "\e[31m"    + "red"
puts "\e[32m"    + "green"
puts "\e[34m"    + "blue"
#    ^color spec ^text

ANSI escape code

# image
# src = colored-text.png
# relative-height = 60
# caption = Output should be like this
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

ANSI escape code

Example:

# enscript ruby
num = 1
print "\e[#{num}A"
# Cursor Up
print "\e[#{num}B"
# Cursor Down

ANSI escape code

Example:

# enscript ruby
print "\e[2K"
# Erase in Line

ANSI escape code

But ANSI escape code has some problems:

ANSI escape code

For example,

# enscript ruby
print "\e[6n"
# Device Status Report

is very slow.

ANSI escape code

If software uses Device Status Report so many times, it should slower by the by.

ANSI escape code

So terminal software with ANSI escape code should be devised within limited operations.

GNU Readline

Reline uses:

Win32 API

(({Fiddle})) what is for calling functions inside .dll or .so dynamic libraries is only one solution for supporting Win32 API.

Win32 API

This is “Console Functions” page URL of Win32 API.

↓↓↓

docs.microsoft.com/en-us/windows/console/console-functions

Win32 API

“Console Functions” is enough to do that the same of ANSI escape code.

Win32 API

Hard work

It was so hard work to complete.

Hard work

So I always do programming, on a desk, on a bed, in trains, in a bathroom, in a toilet…

Hard work

# image
# src = bill-gates-desk-picture.jpg
# relative-height = 80
# caption = Sometimes I use computer on the floor
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Hard work

# image
# src = bill-gates-desk-picture-with-injury.jpg
# relative-height = 80
# caption = I got right anterior cruciate ligament injury
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Hard work

# image
# src = mannequin_2.jpg
# relative-height = 80
# caption = I got right anterior cruciate ligament injury
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Unicode support

Multibyte characters of Unicode has so complex specifications:

Unicode support

Unicode support

I'll omit to explain these 2 specs because of too complex.

Unicode support

Unicode support

Some Unicode characters' width are changed by the situation, for example Cyrillic alphabet.

Unicode support

I'll show 2 gnome-terminal screenshot.

Unicode support

# image
# src = single.png
# relative-height = 60
# caption = "Д" as a single width character
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Unicode support

# image
# src = double.png
# relative-height = 60
# caption = "Д" as a double width character
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Unicode support

# image
# src = both.png
# relative-height = 60
# caption = Both are the same strings, but changed width of "Д"
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Unicode support

# image
# src = both.png
# relative-height = 60
# caption = The behaviour is based on terminal software settings
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Unicode support

How to resolve:

Terminal Ninja!

Unicode support

Vim has a function, (({may_req_ambiguous_char_width()})), the comment of it says…

Unicode support

First, we move the cursor to (1, 0)
and print a test ambiguous character
\u25bd (WHITE DOWN-POINTING TRIANGLE)
and query current cursor position.

COOLEST TECHnINn2019

Unicode support

# image
# src = mannequin_3.jpg
# relative-height = 80
# caption = New headache comes, it's killing me
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Unicode support

I ported it to Reline. Coolest software.

Line editing implementation

Next, let me implement line editing features to Reline.

Line editing implementation

These are key assigned operations…

Line editing implementation

Line editing implementation

Oh, list is cut off in the middle…

Line editing implementation

Line editing implementation

Ah…

Line editing implementation

Line editing implementation

Too many

Line editing implementation

operation method listn(smallester)

# enscript ruby
ed_insert(key)
ed_quoted_insert(str, arg: 1)
ed_next_char(key, arg: 1)
ed_prev_char(key, arg: 1)
ed_move_to_beg(key)
ed_move_to_end(key)
ed_prev_history(key, arg: 1)
ed_next_history(key, arg: 1)
ed_newline(key)
em_delete_prev_char(key)
ed_kill_line(key)
em_kill_line(key)
em_delete_or_list(key)
em_yank(key)
em_yank_pop(key)
ed_clear_screen(key)
em_next_word(key)
ed_prev_word(key)
em_delete_next_word(key)
ed_delete_prev_word(key)
ed_transpose_chars(key)
em_capitol_case(key)
em_lower_case(key)
em_upper_case(key)
em_kill_region(key)
copy_for_vi(text)
vi_insert(key)
vi_add(key)
vi_command_mode(key)
vi_next_word(key, arg: 1)
vi_prev_word(key, arg: 1)
vi_end_word(key, arg: 1)
vi_next_big_word(key, arg: 1)
vi_prev_big_word(key, arg: 1)
vi_end_big_word(key, arg: 1)
vi_delete_prev_char(key)
ed_delete_prev_char(key, arg: 1)
vi_zero(key)
vi_change_meta(key)
vi_delete_meta(key)
vi_yank(key)
vi_list_or_eof(key)
ed_delete_next_char(key, arg: 1)
vi_to_history_line(key)
vi_histedit(key)
vi_paste_prev(key, arg: 1)
vi_paste_next(key, arg: 1)
ed_argument_digit(key)
vi_to_column(key, arg: 0)
vi_next_char(key, arg: 1)
search_next_char(key, arg)

Line editing implementation

GNU Readline features are:

Line editing implementation

It means that I made almost ((*full 2 editors*))

Line editing implementation

Demonstration

Multiline editor

Multiline editor

Today's description of this session explains about “Reidline”.

Multiline editor

"Reidline" is authored for new IRB by keiju-san who
is Ruby's grandfather, it behaves as a multiline editor
like JavaScript console on browsers.

It had many technical problems but I've already solved
that when I implemented Reline.

So I helped to complete Reidline.

Multiline editor

Therefore, I improved Reline for Reidline. It supports multiline a few days ago!

Multiline editor

# image
# src = mannequin_4.jpg
# relative-height = 80
# caption = Stiffness of neck, shoulder, lower back
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Multiline editor

# image
# src = editors.png
# relative-height = 80
# caption = There are 3 editors by Ruby
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Multiline editor

And, I'm the current RDoc maintainer. So I added new feature that shows document after completion.

Multiline editor

Demonstration

Multiline editor

I started development of editor for my wrist, but crash of my body is continued.

Multiline editor

Incredible situation.

Multiline editor

And, at 3rd day of RubyKaigi,nRuby 2.7.0-preview1 will be released, with Reline and Reidline.

Multiline editor

So I should fix all bugs for the day.

Multiline editor

# image
# src = mannequin_gone.jpg
# relative-height = 80
# caption = My body will be gone
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Multiline editor

# image
# src = mannequin_gone.jpg
# relative-height = 80
# caption = This is my last work of Heisei era
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0

Multiline editor

# image
# src = mannequin_gone.jpg
# relative-height = 80
# caption = C'mon, Reiwa era...
# relative-padding-top = 0
# relative-padding-bottom = 0
# relative-padding-right = 0
# relative-padding-left = 0