Tricks share: Edit multiple places at the same time on atom

About

As a developer, editors are one of tools I need to deal with all the time. Here are tricks I used on improving the typing experiences in atom

Trick 1: Edit multiple words at the same time

Given text below

Scenario Outline: eating
  Given there are <start> cucumbers
  When I eat <eat> cucumbers
  Then I should have <left> cucumbers

  Examples:
    | start | eat | left |
    |  12   |  5  |  7    |
    |  12   |  10 |  2   |
    |  20   |  5  |  15  |

Suppose you need to fix the numbers in start column to be 30

Double click those number with Left Ctrl pressed.

Type 30 to change all of highlighted words

Trick 2: Shortcut on changing identical words

Given text below

Scenario Outline: eating
  Given there are <start> cucumbers
  When I eat <eat> cucumbers
  Then I should have <left> cucumbers

  Examples:
    | start | eat | left |
    |  30   |  5   |  7    |
    |  30   |  10 |  2   |
    |  30   |  5   |  15  |

Suppose you would like to change cucumbers as oranges. Beside using replacement from Ctrl f, you can use Ctrl D selection.

Click cucumbers and press Ctrl D 3 times as there are 3 cucumbers.

Then, type oranges which changes all the highlighted words.

Trick 4: Edit rows at the same time

Scenario Outline: eating
  Given there are <start> cucumbers
  When I eat <eat> cucumbers
  Then I should have <left> cucumbers

  Examples:
    | start | eat | left |
    |  30   |  5  |  7   |
    |  30   |  10 |  2   |
    |  30   |  5  |  15  |

Suppose you would like add a column country with all same value Hong Kong.

Add a column country manually

Scenario Outline: eating
  Given there are <start> cucumbers
  When I eat <eat> cucumbers
  Then I should have <left> cucumbers

  Examples:
    | country | start | eat | left |
    |  30   |  5  |  7   |
    |  30   |  10 |  2   |
    |  30   |  5  |  15  |

Select rest of lines with left click while pressing Left Ctrl.

Type | Hong Kong for adding such value to highlighted columns

Fix the spacing in the headers by pressing spaces

Scenario Outline: eating
Given there are <start> cucumbers
When I eat <eat> cucumbers
Then I should have <left> cucumbers

  Examples:
    | country   | start | eat | left |
    | Hong Kong |  30   |  5  |  7   |
    | Hong Kong |  30   |  10 |  2   |
    | Hong Kong |  30   |  5  |  15  |

Round up…

Tricks for editing things at the same time are very common on coding. Let me know if you have any more tricks about that :D

​

Run luci on openwrt docker image

About

As the old blog is so popular and readers may have problems on installation, I have found a new way for setup luci development with docker and openwrt image.

Prerequisites

• Docker

Although I am using Window for this blog, it will be much easier if you try in Linux environment.

For Docker installation in Window, I recommend you to read my another blog to distinguish differences between docker-toolbox and native docker

Version checking

At the time on writing this blog, I am using Docker version 17.05.0-ce, build 89658be in WIN 10 platform. Actually, version and platform do not matter.

$ docker -v
Docker version 17.05.0-ce, build 89658be

Get the openwrt docker image

According to openwrt, you need following calls

docker import http://downloads.openwrt.org/attitude_adjustment/12.09/x86/generic/openwrt-x86-generic-rootfs.tar.gz openwrt-x86-generic-rootfs

Verification

docker images
REPOSITORY                           TAG                   IMAGE ID            CREATED             VIRTUAL SIZE
openwrt-x86-generic-rootfs           latest                2cebd16f086c        6 minutes ago       5.283 MB

NOTES:

• For Window users, you may get errors from docker-engine. Make sure you are using Terminal from Docker which named as Docker QuickStart Terminal

Run the container with such image

$ docker run --rm -it openwrt-x86-generic-rootfs sh

NOTES:

• --rm stop and remove such container from docker history after exiting the container
• -it runs the container in an interactive manner

Linux users

Restart the uhttpd first.

(CONTAINER) / # /etc/init.d/uhttpd restart
bind(): Address already in use
Error: No sockets bound, unable to continue
(CONTAINER) / #  netstat -atn
Active Internet connections (servers and established)
Proto Recv-Q Send-Q Local Address           Foreign Address         State
tcp        0      0 0.0.0.0:80              0.0.0.0:*               LISTEN

You may or may not need to restart such uhttpd service. However, you need to ensure such container is listening on port 80.

Get container’s IP

(CONTAINER) / # ifconfig
eth0      Link encap:Ethernet  HWaddr 02:42:AC:11:00:02
          inet addr:172.17.0.2  Bcast:0.0.0.0  Mask:255.255.0.0
          inet6 addr: fe80::42:acff:fe11:2/64 Scope:Link
          UP BROADCAST RUNNING MULTICAST  MTU:1500  Metric:1
          RX packets:31 errors:0 dropped:0 overruns:0 frame:0
          TX packets:31 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:0
          RX bytes:2090 (2.0 KiB)  TX bytes:1866 (1.8 KiB)

Browse http://172.17.0.2 with your browser

Window users

Steps same with Linux users except the browsing step. Hopefully, you are not able to browse 172.17.0.2 without adding a route.

Find out the IP of the docker-engine VM

Reading banner from Docker QuickStart Terminal

                        ##         .
                  ## ## ##        ==
               ## ## ## ## ##    ===
           /"""""""""""""""""\___/ ===
      ~~~ {~~ ~~~~ ~~~ ~~~~ ~~~ ~ /  ===- ~~~
           \______ o           __/
             \    \         __/
              \____\_______/

docker is configured to use the default machine with IP 192.168.99.100
For help getting started, check out the docs at https://docs.docker.com

Start interactive shell

Here, 192.168.99.100 is the IP we want.

Launch a window CMD with administrator permission

Add route

C:\WINDOWS\system32>route ADD 172.17.0.0 MASK 255.255.0.0 192.168.99.100

Test with ping

C:\WINDOWS\system32>ping 172.17.0.2

Ping 172.17.0.2 (使用 32 位元組的資料):
回覆自 172.17.0.2: 位元組=32 時間<1ms TTL=63

172.17.0.2 的 Ping 統計資料:
    封包: 已傳送 = 1，已收到 = 1, 已遺失 = 0 (0% 遺失)，
大約的來回時間 (毫秒):
    最小值 = 0ms，最大值 = 0ms，平均 = 0ms
Control-C
^C

Browse http://172.17.0.2 with your browser

Development

Mount files to the container

In order to do the development, you need to put your source codes inside the container by mounting them into the container.

Normally, below are 2 common mount locations.

/ # ls /usr/lib/lua/luci/
cacheloader.lua  config.lua       fs.lua           i18n/            model/           sys.lua          tools/
cbi.lua          controller/      http.lua         init.lua         sauth.lua        sys/             util.lua
cbi/             debug.lua        http/            ip.lua           sgi/             template.lua     version.lua
ccache.lua       dispatcher.lua   i18n.lua         ltn12.lua        store.lua        template/        view/
/ # ls /www/
cgi-bin/      index.html    luci-static/

As an example, I have mount 2 resources one.pdf and folder pixi

$ docker run --rm -it -p 8080:80 -v /c/Users/Mond/Documents/GitHub/pixi.js/:/www/luci-static/resources/pixi -v /c/Users
/Mond/Documents/one.pdf:/www/luci-static/resources/one.pdf  openwrt-x86-generic-rootfs sh

BusyBox v1.19.4 (2013-03-06 20:07:44 UTC) built-in shell (ash)
Enter 'help' for a list of built-in commands.

/ # ls /www/luci-static/resources/
bandwidth.svg    cbi.js           icons            one.pdf          wifirate.svg     xhr.js
cbi              connections.svg  load.svg         pixi             wireless.svg

Relevant blogs

• http://mondwan.blogspot.hk/2015/06/how-to-setup-luci-web-framework-with.html
• http://mondwan.blogspot.hk/2014/06/install-luci-on-ubuntu-1204.html

References

• https://wiki.openwrt.org/doc/howto/docker_openwrt_image
• https://docs.docker.com/toolbox/toolbox_install_windows/

​