DEV Community: Ding Fan

yarn link when develop cli project

Ding Fan — Mon, 25 Oct 2021 08:41:57 +0000

It's difficult to make yarn link work as intended when developing a command line project. The easiest way is:

yarn link in your cli project

assume your cli project is cli-project, assume the name is cliProject

# in cli-project
yarn link

create a demo project and init with yarn

mkdir demo-project
cd demo-project
yarn init -y

add your cli project as dependency in package.json
yarn link cliProject in demo-project

# in demo-project
yarn link cliProject

now you can use yarn cliProject here. In my situation, I would

# in demo-project
yarn cliProject --version # to check if yarn link succeeded
yarn cliProject new haha-project # to test my new command

Thoughts on solving basic algorithm problems

Ding Fan — Tue, 17 Aug 2021 20:41:55 +0000

I relized that while solving basic algorithm problems like
https://www.hackerrank.com/challenges/birthday-cake-candles/problem
I should use basic logic/process like for/while/recursion. It's helpful to analyze my solution in view of complexity.

The last time I solving problems in an interview, I carelessly use built-in methods like map/sort, I was used to the habit of writing business code, "get things done whatever it takes, optimize later". Which left a bad impression to the interviewer, he might think that I'm suck at handling complixity.

Vim Tips

Ding Fan — Tue, 17 Aug 2021 04:21:00 +0000

If you know nothing about vim, you can also read this and feel the power.

Remember, there is a tutor at your service anytime in your terminal. Just summon the tutor with vimtutor . What? You haven't install vim? Never mind.

The first thing you need to know about vim is HOW TO QUIT

quit

:q!
quit a vim editor without saving

If you are using VSCode extension Vim, you don't need to "quit" ;)

aCharacter should be replaced with character you want
aString should be replaced with string you want

motion

j / k / h / l
down, up, left, right
I think j is down because usually we read a file from top to bottom
so we can press j with index finger

gg / G
move to start / end of this file

0 / $
move to start / end of this line

^
move to first character of this line

ctrl + o / ctrl + i
move cursor to previous / next position

# / *
move cursor to previous / next occurrence of current word under cursor

ctrl + w
switch between panels

ctrl + b / ctrl + f
move backward / forward a page
In VSCode: If you check fold fix, this might not work

ctrl + u / ctrl + d
move up / down half page
In VSCode: If you check fold fix, this might not work

editing

ciw
change in word

diw
delete in word

d/ c / y + i + ({["'
delete / change / yank in () {} [] "" '' and etc
you will love this

dt aCharacter
delete to aCharacter

>> / <<
increase / decrease indentation

A
append to the end of this line

I
insert at the start of this line

J
join current line with next line

r + enter
replace character under cursor with enter

D
delete to the end of this line

dd
delete this line

~
toggle letter case

.
repeat last text change

u / ctrl + r
undo / redo
In VSCode: this might be unreliable, enter insert mode and use ctrl + z for the rescue

function

za
toggle folding
In VSCode: If you ran into trouble with motion, ctrl + , open settings, search vim fold , check fold fix.

:%s/foo/bar/g
% in all lines s substitute foo with bar g every occurrence in corresponding line

/ aString
search aString
press enter move cursor to the occurrence of aString
press n move cursor to next occurrence of aString
press N move cursor to previous occurrence of aString

ctrl + , open settings, search vim clip , check use system clipboard to use system clipboard

ctrl + , open settings, search vim easy , check enable easymotion plugin, now you can use \\ with hjkl

An interesting JS question

Ding Fan — Wed, 11 Aug 2021 19:54:43 +0000

You are refactoring a function renderView which takes an item as parameter. In renderView there is a setState function which will trigger a render process.

let renderView = (item) => {
    // some logic play with item
    setState()
}

Currently, function renderView was called too many times in a business action, thus setState was triggered again and again. You want to reduce the trigger counts to improve the performance. You are trying to make function renderView takes an array of items, so you can call setState only once after deal with all the objects.

After some attempts, you found that the renderView was appeared every where in the code base, it's error-prone to change the parameter of renderView and every logic called it, you shouldn't touch those legacy code and of course you will never want to do it.

You decide to hack renderView to make it trigger only once while called several times in a row. But how?