Knowledge worth sharing

Determine progressive JPEG by it’s content

From wiki-JPEG, we could see a baseline/progressive JPEG have byte marker mapping differently as following:

So to tell the image is progressive JPEG, we need to check if it contains 0xFF, 0xC0 which is c2ff in Two-byte hexadecimal display.

Measure compressed request size with curl, gzip and wc

To measure gzip sizing for a request, you don’t need to actually gzip it, just use pipe | to pipe the stream from curl to gzip to wc :

1
2
3
4
5
6
7
8
9
10
11
12
13

# before gzip
$ curl https://www.paddingleft.com | wc -c
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 57847    0 57847    0     0  99114      0 --:--:-- --:--:-- --:--:-- 99053
   57847

# after gzip
$ curl https://www.paddingleft.com | gzip | wc -c
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 57848    0 57848    0     0   111k      0 --:--:-- --:--:-- --:--:--  110k
   10443

As you can see, before gzip it’s 57847 bytes, after gzip it’s 10443 bytes.

Measure file size after gzip

You could do same things to measure a file gzip sizing by gzip with -c option, so it won’t actually gzip it.

1
2

$ gzip -c foo.jpg | wc -c
    53688

Switch mode

Insert mode

• i
  • insert before the char
• I
  • insert before the start of line
• a
  • append after the char
• A
  • append at the end of line

Normal mode

• ESC

Visual mode

• v
  • select a char
• V
  • select a line
• Ctrl + v
  • visual block mode

Move cursor(Normal mode)

char

• h
• j
• k
• l

Word

• w
  • go to next start of word
• e
  • go to end of word
• b
  • back to start of word

Block & Paragraph

• {}
  • goto blank line
• ()
  • goto ()
• []
  • goto []
• [{ or }]
  • goto start/end of block
• %
  • go to the match bracket

Window

• H
  • Top of window
• L
  • Last of window
• M
  • Middle of window

File

• gg
  • Start
• G
  • end of file

Scroll

• zt
  • scroll current line to top
• zb
  • scroll current line to bottom
• zz
  • scroll current line to middle

Search

Search char in single line (keep normal mode)

• f/F
  • find char, forward/backward
  • abcABCabc, fC to find middle C
• t/T
  • Go to previous char before the char, forward/backward
  • foo.bar<> , go to r by t<
• ;
  • Repeat t/T/f/F
• ,
  • Reverse t/T/f/F

Search in file

• /
  • Search forward
• ?
  • Search backward
• n and N
  • next and previous
• *, #
  • search next/previous current word

Edit

• insert line before/after the current line
  • o, O
• join two line (keep mode)
  • j
• yank (copy) the current line
  • yy, Y
• Cut and change to insert mode
  • c
    • Change
  • s
    • substitute
  • C
    • Cut to end of line
  • S
    • Delete line and go to insert mode
• delete
  • d(keep mode)
    • d3j or 3dd
  • x and X
    • delete and backspace
• replace
  • r
• repeat action
  • .
• Macro
  • q + a~z
    • record macro to key in a~z
  • normal mode + q to quit recording
  • @ + a~z to excute macro
• Bookmark
  • m + a~z
    • bookmark current location to a~z
  • ` + a~z
    • go to a~z bookmark
• clipboard register key
  • “ + a~z
    • Specify which register to use on the following command
    • 0 is default clipboard for y(yank)
    • " is default clipboard for others
    • e.g. "adw : delete the and save it to register a
    • e.g. "0p : paste from last yank
    • e.g. to copy foo and replace bar with it, yw then fbardw"0p

Concept

• There are three dimention in vim
  • window, file, project
• Use vim like your mouse
  • e.g. delete Bar in fooBarBeBaz, fBdfe

Useful vim command combination list

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

# Make a word uppercase
gUe

# edit neariest word inside symbol, e.g. }
ci}

# edit neariest word outside symbol, e.g. ]
ca]

# edit and delete from cursor to next symbol, e.g. )
ct)

# edit and delete from cursor to previos symbol, e.g. )
cT)

# delete inside tag
dit

# replace word with yanked word
viwp

# Comment multi line, for example using # for comment
1. Ctrl + v to enter "Visual block mode"
2. Move cursor to select lines that need to be edited
3. Shift + i
4. #
5. Esc

# Show Line numbers
:set number

# Set relative line number
:set rnu

# get recent command list
q:

# Replace word A with word B
:%s/A/B/g

# Undo/Redo
u / Ctrl+r

# increase the first right number in the line
Ctrl + A

# decrease the first right number in the line
Ctrl + X

Use relative line mode with vim

In vim, you will frequently need to manipulate multi line with y3j 4yy or something else, relative line mode in IDE could help you easy to count the line number.

• In vim

1

:set rnu

• In VSCode:

1

"editor.lineNumbers": "relative",

Get difference before save

1

:w !diff % -

Explanation

• w without filename will save to stdin
• ! will excute bash in vim
• % is current file in vim
• diff with - will read content from stdin

vimrc

" is the comment symbol in .vimrc, could only be placed at the start of line

1
2
3
4
5
6
7
8
9
10

"Enable copy paste from system clibboard
set clipboard^=unnamed,unnamedplus

"Show differt cursor in different mode
let &t_SI = "\<Esc>]50;CursorShape=1\x7"
let &t_SR = "\<Esc>]50;CursorShape=2\x7"
let &t_EI = "\<Esc>]50;CursorShape=0\x7"

"Show relative line number
set rnu

Reference

• https://vim.rtorr.com/

When creating fixed navigation bar with padding, we got :

1
2
3

position: fixed;
width: 100%;
padding: 15px;

However you will find padding-right disappear, the reason is the width is window width + padding-left + padding-right. It is exceed the window, to fix it just use width: calc(100% - 30px) to reduce the width

1
2
3

position: fixed;
width: calc(100% - 30px);
padding: 15px;

See the Pen Fixed nav with correct padding by AsinChen (@Asing1001) on CodePen.

1. Go to create my applet page in IFTTT
2. Choose this > Webhooks > Receive a web request
3. Set any event name and click create trigger
4. Choose that > Line > Send message
5. Set Message as value1
6. Go to Webhooks
7. Click Documentation on the top right corner
8. Fill up the event name and value1 then try the curl example on the page
9. You could see a message deliver to LINE immdiately!

Steps to install windows service

1. Create a start.bat file with content npm start
2. Download nssm
3. Extract it and go to nssm/win64 folder
4. Type nssm install service-name from command prompt
5. Select start.bat as Application Path, you could also add your startup Arguments here
6. Start service with nssm start service-name
7. You could find it already registered as windows service :)

NSSM commands reference

You could type nssm anytime to see this document

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

M:\nssm-2.24\win64>nssm
NSSM: The non-sucking service manager
Version 2.24 64-bit, 2014-08-31
Usage: nssm <option> [<args> ...]

To show service installation GUI:

        nssm install [<servicename>]

To install a service without confirmation:

        nssm install <servicename> <app> [<args> ...]

To show service editing GUI:

        nssm edit <servicename>

To retrieve or edit service parameters directly:

        nssm get <servicename> <parameter> [<subparameter>]

        nssm set <servicename> <parameter> [<subparameter>] <value>

        nssm reset <servicename> <parameter> [<subparameter>]

To show service removal GUI:

        nssm remove [<servicename>]

To remove a service without confirmation:

        nssm remove <servicename> confirm

To manage a service:

        nssm start <servicename>

        nssm stop <servicename>

        nssm restart <servicename>

        nssm status <servicename>

        nssm rotate <servicename>

Reference

http://nssm.cc

Before start

1. Download and install redis from official site
2. redis excutable commands are under bin folder, configs are under etc folder, logs are under var folder
   Read more »

ECONNRESET when making thousands requests

In situation doing thousands of http requests, it is easy to get error ECONNRESET, for example :

1
2
3
4
5
6
7
8

require('isomorphic-fetch');

const promises = []
for(var i=0; i<10000; i++){
    promises.push(fetch('http://example.com/'+i));
}

const results = await Promise.all(promises)

To find ports status on windows, there is a default Windows GUI - Resource Monitor or you could use netstat via command prompt.