Jekyll2020-03-20T20:53:32+00:00https://maxim-danilov.github.io/feed.xmlMaxim Danilov Developer BlogMy blog focuses on tips for improving software development skills.Maxim DanilovISO-8601 UTC datetimes in web-applications2019-03-02T07:23:00+00:002019-03-02T07:23:00+00:00https://maxim-danilov.github.io/using-iso-time-for-api<p>The best way to handle dates in web-apps (especially a backend side) is using ISO-8601 standart (DB dates, input params, responses).</p>
<p>An example of an ISO-8601 UTC datetime: ‘2019-03-02T13:27:40Z’.</p>
<p>Usage:</p>
<ul>
<li>npm install moment –save or npm install moment-timezone –save:</li>
</ul>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">const</span> <span class="nx">moment</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="dl">'</span><span class="s1">moment-timezone</span><span class="dl">'</span><span class="p">);</span></code></pre></figure>
<ul>
<li>get a Moment (UTC mode) by a current system time:</li>
</ul>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">moment</span><span class="p">.</span><span class="nx">utc</span><span class="p">();</span></code></pre></figure>
<ul>
<li>print a current system time (my system time is GMT+5):</li>
</ul>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">moment</span><span class="p">().</span><span class="nx">format</span><span class="p">();</span>
<span class="c1">// > '2019-03-02T18:27:40+05:00'</span></code></pre></figure>
<ul>
<li>print a current system UTC time (my system time is GMT+5)</li>
</ul>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">moment</span><span class="p">.</span><span class="nx">utc</span><span class="p">().</span><span class="nx">format</span><span class="p">();</span>
<span class="c1">// > '2019-03-02T13:27:40Z'</span></code></pre></figure>
<ul>
<li>get a Moment (UTC mode) by a UTC date (string)</li>
</ul>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">const</span> <span class="nx">utcDateString</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">2019-03-02T13:27:40Z</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">moment</span><span class="p">.</span><span class="nx">utc</span><span class="p">(</span><span class="nx">utcDateString</span><span class="p">);</span></code></pre></figure>
<ul>
<li>get a JS Date by a UTC date (string)</li>
</ul>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">moment</span><span class="p">.</span><span class="nx">utc</span><span class="p">(</span><span class="nx">utcDateString</span><span class="p">).</span><span class="nx">toDate</span><span class="p">();</span></code></pre></figure>
<ul>
<li>check is a valid ISO 8601 date (string)</li>
</ul>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">const</span> <span class="nx">isValidDate</span> <span class="o">=</span> <span class="nx">moment</span><span class="p">(</span><span class="nx">utcDateString</span><span class="p">,</span> <span class="nx">moment</span><span class="p">.</span><span class="nx">ISO_8601</span><span class="p">).</span><span class="nx">isValid</span><span class="p">();</span></code></pre></figure>
<ul>
<li>convert a UTC date (string) to a Moment with changed timeozne
<ol>
<li>get a JS Date by a UTC date (string)</li>
<li>change the timezone to ‘America/Los_Angeles’</li>
</ol>
</li>
</ul>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">moment</span><span class="p">.</span><span class="nx">utc</span><span class="p">(</span><span class="nx">utcDateString</span><span class="p">).</span><span class="nx">tz</span><span class="p">(</span><span class="dl">'</span><span class="s1">America/Los_Angeles</span><span class="dl">'</span><span class="p">);</span></code></pre></figure>
<ul>
<li>convert a timezone date (string) to a Moment (with a timezone offset)
<ol>
<li>get a Moment by a date (string) and a timezone</li>
<li>get a Moment (UTC mode)</li>
</ol>
</li>
</ul>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">const</span> <span class="nx">losAngelesDate</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">March 2nd 2019, 5:27:40 am</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">moment</span><span class="p">.</span><span class="nx">tz</span><span class="p">(</span><span class="nx">losAngelesDate</span><span class="p">,</span> <span class="dl">'</span><span class="s1">MMMM Do YYYY, h:mm:ss a</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">America/Los_Angeles</span><span class="dl">'</span><span class="p">).</span><span class="nx">utc</span><span class="p">();</span>
<span class="c1">// > 2019-03-02T13:27:40Z</span></code></pre></figure>Maxim DanilovFuzzy search using fzf2018-12-08T13:37:00+00:002018-12-08T13:37:00+00:00https://maxim-danilov.github.io/fuzzy-search-for-your-terminal-using-fzf<p>Fzf is a smart command line tool to find files and folders. Just forget about typing file paths.</p>
<p>For example:</p>
<ul>
<li>I don’t have to write paths for any files or folders because fzf do this job using a fuzzy search</li>
<li>Actually fzf is a very usable console interface to filter
any lists, files, command history, processes, hostnames, bookmarks, git commits, etc.</li>
<li>You can write your own tools with fzf to increase your productivity</li>
</ul>
<p>It’s easy to install fzf using git: <a href="https://github.com/junegunn/fzf#using-git">https://github.com/junegunn/fzf#using-git</a></p>
<p>After the installation is complete you will be able to use in your terminal:</p>
<ul>
<li><CTRL+T> list files + folders in current directory (recursively)</li>
<li><CTRL+R> search history of shell commands</li>
<li><ALT+C> fuzzy change directory (works without cd command)
These default features are very usable.</li>
</ul>
<p>More important is configuring functions that will help you to build your software products. My current functions:</p>
<ul>
<li>open file by text (recursively)</li>
<li>open file by name (recursively)</li>
<li>interactive cd</li>
</ul>
<p>Below the code of the bash functions:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="c"># open file by text</span>
<span class="c"># sudo apt-get install silversearcher-ag</span>
vg<span class="o">()</span> <span class="o">{</span>
<span class="nb">local </span>file
<span class="nb">local </span>line
<span class="nb">read</span> <span class="nt">-r</span> file line <span class="o"><<<</span><span class="s2">"</span><span class="si">$(</span>ag <span class="nt">--nobreak</span> <span class="nt">--noheading</span> <span class="nv">$@</span> | fzf <span class="nt">-0</span> <span class="nt">-1</span> | <span class="nb">awk</span> <span class="nt">-F</span>: <span class="s1">'{print $1, $2}'</span><span class="si">)</span><span class="s2">"</span>
<span class="k">if</span> <span class="o">[[</span> <span class="nt">-n</span> <span class="nv">$file</span> <span class="o">]]</span>
<span class="k">then
</span>vim <span class="nv">$file</span> +<span class="nv">$line</span>
<span class="k">fi</span>
<span class="o">}</span>
<span class="c"># open file by name</span>
vf<span class="o">()</span> <span class="o">{</span>
<span class="nb">local </span>files
<span class="nv">IFS</span><span class="o">=</span><span class="s1">$'</span><span class="se">\n</span><span class="s1">'</span> <span class="nv">files</span><span class="o">=(</span><span class="si">$(</span>fzf-tmux <span class="nt">--query</span><span class="o">=</span><span class="s2">"</span><span class="nv">$1</span><span class="s2">"</span> <span class="nt">--multi</span> <span class="nt">--select-1</span> <span class="nt">--exit-0</span><span class="si">)</span><span class="o">)</span>
<span class="o">[[</span> <span class="nt">-n</span> <span class="s2">"</span><span class="nv">$files</span><span class="s2">"</span> <span class="o">]]</span> <span class="o">&&</span> <span class="k">${</span><span class="nv">EDITOR</span><span class="k">:-</span><span class="nv">vim</span><span class="k">}</span> <span class="s2">"</span><span class="k">${</span><span class="nv">files</span><span class="p">[@]</span><span class="k">}</span><span class="s2">"</span>
<span class="o">}</span>
<span class="c"># interactive cd</span>
<span class="k">function </span><span class="nb">cd</span><span class="o">()</span> <span class="o">{</span>
<span class="k">if</span> <span class="o">[[</span> <span class="s2">"$#"</span> <span class="o">!=</span> 0 <span class="o">]]</span><span class="p">;</span> <span class="k">then
</span><span class="nb">builtin cd</span> <span class="s2">"</span><span class="nv">$@</span><span class="s2">"</span><span class="p">;</span>
<span class="k">return
fi
while </span><span class="nb">true</span><span class="p">;</span> <span class="k">do
</span><span class="nb">local </span><span class="nv">lsd</span><span class="o">=</span><span class="si">$(</span><span class="nb">echo</span> <span class="s2">".."</span> <span class="o">&&</span> <span class="nb">ls</span> <span class="nt">-p</span> | <span class="nb">grep</span> <span class="s1">'/$'</span> | <span class="nb">sed</span> <span class="s1">'s;/$;;'</span><span class="si">)</span>
<span class="nb">local dir</span><span class="o">=</span><span class="s2">"</span><span class="si">$(</span><span class="nb">printf</span> <span class="s1">'%s\n'</span> <span class="s2">"</span><span class="k">${</span><span class="nv">lsd</span><span class="p">[@]</span><span class="k">}</span><span class="s2">"</span> |
fzf <span class="nt">--reverse</span> <span class="nt">--preview</span> <span class="s1">'
__cd_nxt="$(echo {})";
__cd_path="$(echo $(pwd)/${__cd_nxt} | sed "s;//;/;")";
echo $__cd_path;
echo;
ls -p --color=always "${__cd_path}";
'</span><span class="si">)</span><span class="s2">"</span>
<span class="o">[[</span> <span class="k">${#</span><span class="nv">dir</span><span class="k">}</span> <span class="o">!=</span> 0 <span class="o">]]</span> <span class="o">||</span> <span class="k">return </span>0
<span class="nb">builtin cd</span> <span class="s2">"</span><span class="nv">$dir</span><span class="s2">"</span> &> /dev/null
<span class="k">done</span>
<span class="o">}</span></code></pre></figure>
<p>As you can see ‘open file by text’ requires silversearcher-ag. Put these functions to your .zshrc/.bashrc file to call them from anywhere.</p>
<p>Hope fzf and the functions will help you and make the world better.</p>Maxim DanilovMake Linux terminal great again (Terminator + Oh My ZSH + autosuggestions + highlighting + Agnoster theme + powerline fonts + solarized colors)2018-07-16T09:49:10+00:002018-07-16T09:49:10+00:00https://maxim-danilov.github.io/make-linux-terminal-great-again<p>The terminal is part of every software developer’s life. The terminal carries out routine tasks. Most Linux programs have only console interface. If you have a good terminal you can forget about a boring graphical interface. :)</p>
<p><img src="/assets/img/0010_c.png" alt="image-title-here" class="img-responsive" /></p>
<p>However, the default terminal is like an old typewriter. It doesn’t have autosuggestions, autocorrect, highlighting. Let’s fix it.</p>
<h2 id="install-terminator">Install Terminator</h2>
<p>Well, to start with we are going to update your terminal emulator. We will use Terminator instead of gnome-terminal. Terminator has appearance settings, hotkeys, text search, arrange terminals in a grid.</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nb">sudo </span>apt-get <span class="nb">install </span>terminator</code></pre></figure>
<h2 id="install-zsh">Install Zsh</h2>
<p>Next, we will update our Unix shell. We will use zsh instead of bash. Zsh has autocorrection, history search, plugins, improved bash language.</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nb">sudo </span>apt-get <span class="nb">install </span>zsh</code></pre></figure>
<p>Zsh should be set as your default shell:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">chsh <span class="nt">-s</span> <span class="si">$(</span>which zsh<span class="si">)</span></code></pre></figure>
<p>Restart your terminal. You should see the configuration menu of zsh and choose option 2:
<code class="language-plaintext highlighter-rouge">Populate your ~/.zshrc with the configuration recommended by the system administrator and exit</code></p>
<p><img src="/assets/img/0011.png" alt="image-title-here" class="img-responsive" /></p>
<p>Don’t forget to move your configuration and aliases from .bashrc to .zshrc:
<img src="/assets/img/0012.png" alt="image-title-here" class="img-responsive" /></p>
<h2 id="install-oh-my-zsh">Install Oh My Zsh</h2>
<p>Oh my zsh is a framework for managing your zsh. It adds a lot of helper functions, plugins, themes.</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">sh <span class="nt">-c</span> <span class="s2">"</span><span class="si">$(</span>curl <span class="nt">-fsSL</span> https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh<span class="si">)</span><span class="s2">"</span></code></pre></figure>
<h2 id="install-powerline-fonts">Install Powerline fonts</h2>
<p>We need <a href="https://github.com/powerline/fonts">these fonts</a> to show Unicode chars in the terminal.</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nb">sudo </span>apt-get <span class="nb">install </span>fonts-powerline</code></pre></figure>
<h2 id="change-theme-to-agnoster">Change theme to Agnoster</h2>
<p>You need to change <code class="language-plaintext highlighter-rouge">ZSH_THEME="robbyrussell"</code> to <code class="language-plaintext highlighter-rouge">ZSH_THEME="agnoster"</code> in your .zshrc</p>
<p>Restart your terminal.</p>
<h2 id="install-solarized-color">Install Solarized color</h2>
<p>Next, we will install the color palette for the terminal.</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">git clone git://github.com/sigurdga/gnome-terminal-colors-solarized.git ~/.solarized</code></pre></figure>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nb">cd</span> ~/.solarized</code></pre></figure>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">./install.sh</code></pre></figure>
<p>Choose option 1 (dark theme). Then choose option 1 to download dircolors-solarized. After installation, open .zshrc and add the line:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nb">eval</span> <span class="sb">`</span><span class="nb">dircolors</span> ~/.dir_colors/dircolors<span class="sb">`</span></code></pre></figure>
<p>Then we need to activate just installed color palette:
In your terminator right click on the terminal</p>
<p><code class="language-plaintext highlighter-rouge">Preferences>Profiles>Colors>Foreground and Background>Built-in schemes</code>: <code class="language-plaintext highlighter-rouge">Solarized dark</code></p>
<p><code class="language-plaintext highlighter-rouge">Preferences>Profiles>Colors>Palette>Built-in schemes</code>: <code class="language-plaintext highlighter-rouge">Solarized</code></p>
<p><img src="/assets/img/0013.png" alt="image-title-here" class="img-responsive" /></p>
<p>Restart Terminator. You should see something like this:</p>
<p><img src="/assets/img/0014.png" alt="image-title-here" class="img-responsive" /></p>
<h2 id="oh-my-zsh-plugins">Oh My Zsh plugins</h2>
<h3 id="autosuggestions">Autosuggestions</h3>
<p>Autosuggestions work using your zsh history. This greatly increases your typing speed.
https://github.com/zsh-users/zsh-autosuggestions</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">git clone https://github.com/zsh-users/zsh-autosuggestions <span class="k">${</span><span class="nv">ZSH_CUSTOM</span><span class="k">:-</span><span class="p">~/.oh-my-zsh/custom</span><span class="k">}</span>/plugins/zsh-autosuggestions</code></pre></figure>
<p>Add the plugin to the list of plugins for Oh My Zsh to load (inside ~/.zshrc):
<code class="language-plaintext highlighter-rouge">plugins=(zsh-autosuggestions)</code></p>
<p><img src="/assets/img/0006.gif" alt="image-title-here" class="img-responsive" /></p>
<p>Press the right arrow to use the suggestion.</p>
<h3 id="remove-hostname">Remove hostname</h3>
<p>The username takes some space of your terminal. We’ll remove this.
Add this line to your ~/.zshrc</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">prompt_context<span class="o">()</span> <span class="o">{}</span> </code></pre></figure>
<p><img src="/assets/img/0015.png" alt="image-title-here" class="img-responsive" /></p>
<p>Now it looks more compact.</p>
<h3 id="syntax-highlighting">Syntax highlighting</h3>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">git clone https://github.com/zsh-users/zsh-syntax-highlighting.git</code></pre></figure>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nb">echo</span> <span class="s2">"source </span><span class="k">${</span><span class="p">(q-)PWD</span><span class="k">}</span><span class="s2">/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh"</span> <span class="o">>></span> <span class="k">${</span><span class="nv">ZDOTDIR</span><span class="k">:-</span><span class="nv">$HOME</span><span class="k">}</span>/.zshrc</code></pre></figure>
<p><img src="/assets/img/0016.png" alt="image-title-here" class="img-responsive" /></p>
<h3 id="vim">Vim</h3>
<p>This plugin for vim fans.
Add <code class="language-plaintext highlighter-rouge">vi-mode</code> to your plugins array. Press esc to switch to normal mode.</p>
<h2 id="my-zshrc">My .zshrc</h2>
<p>You can find the latest version of my .zshrc in my repository: <a href="https://github.com/maxim-danilov/oh-my-zsh-config-maxim-danilov">https://github.com/maxim-danilov/oh-my-zsh-config-maxim-danilov</a></p>
<h2 id="conclusion">Conclusion</h2>
<p>We built a beautiful terminal with autosuggestions, autocorrect, highlighting, hotkeys and vim as an input method. The terminal has a potential for further development.</p>Maxim DanilovTurning Vim into a JavaScript IDE2018-07-06T11:50:30+00:002018-07-06T11:50:30+00:00https://maxim-danilov.github.io/vim-to-js-ide<p>Integrated development environment (IDE) is an important tool for software developers. In simple terms, IDE is a powerful text editor for creating programs.</p>
<p><img src="/assets/img/0005.gif" alt="image-title-here" class="img-responsive" /></p>
<p>Vim is a lightweight, fast, and free text editor. Vim is well known for its hotkeys that make coding faster and more comfortable. Developers created a lot of plugins for Vim.</p>
<p>So we’re going to build a fast, flexible, lightweight IDE using Vim with plugins. Let’s define the necessary functions of IDE:</p>
<ul>
<li>Syntax highlighting</li>
<li>Snippets</li>
<li>Lint (analyzes source code to flag programming errors, bugs)</li>
<li>Code formatting tool</li>
<li>Autocomplete</li>
</ul>
<blockquote>
<p>The commands below are intended for Linux. I use Ubuntu 16.04.</p>
</blockquote>
<h2 id="install-vim">Install Vim</h2>
<p>We are going to use modern Vim plugins which require Vim 8 (latest version). Install Vim 8 using:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nb">sudo </span>add-apt-repository ppa:jonathonf/Vim</code></pre></figure>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nb">sudo </span>apt update</code></pre></figure>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nb">sudo </span>apt <span class="nb">install </span>vim</code></pre></figure>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">vim –version</code></pre></figure>
<h2 id="install-vundle">Install Vundle</h2>
<p>Vundle is a plugin manager for Vim (as npm for JavaScript).
Install Vundle using git clone:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">git clone https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vim</code></pre></figure>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">vim .vimrc</code></pre></figure>
<p>Put this at the top of your <code class="language-plaintext highlighter-rouge">~/.vimrc</code> to use Vundle:</p>
<figure class="highlight"><pre><code class="language-viml" data-lang="viml"><span class="k">set</span> nocompatible " be iMproved<span class="p">,</span> required
<span class="k">filetype</span> off " required
<span class="c">" set the runtime path to include Vundle and initialize</span>
<span class="k">set</span> rtp<span class="p">+=~</span><span class="sr">/.vim/</span>bundle/Vundle<span class="p">.</span><span class="k">vim</span>
<span class="k">call</span> vundle#begin<span class="p">()</span>
<span class="c">" alternatively, pass a path where Vundle should install plugins</span>
<span class="c">"call vundle#begin('~/some/path/here')</span>
Plugin <span class="s1">'VundleVim/Vundle.vim'</span>
Plugin <span class="s1">'tpope/vim-fugitive'</span>
Plugin <span class="s1">'git://git.wincent.com/command-t.git'</span>
Plugin <span class="s1">'rstacruz/sparkup'</span><span class="p">,</span> <span class="p">{</span><span class="s1">'rtp'</span><span class="p">:</span> <span class="s1">'vim/'</span><span class="p">}</span>
<span class="k">call</span> vundle#<span class="k">end</span><span class="p">()</span> " required
<span class="k">filetype</span> plugin indent <span class="k">on</span> " required</code></pre></figure>
<p>Launch Vim and run <code class="language-plaintext highlighter-rouge">:PluginInstall</code></p>
<p><img src="/assets/img/0001.png" alt="image-title-here" class="img-responsive" /></p>
<h2 id="install-the-syntax-highlighting-plugin">Install the syntax highlighting plugin</h2>
<p>A syntax highlighting assists programmers when reading and analyzing code. We will install this plugin:
<a href="https://github.com/pangloss/vim-javascript">https://github.com/pangloss/vim-javascript</a></p>
<p>We need add this line to <code class="language-plaintext highlighter-rouge">.vimrc</code> into the plugins section:</p>
<p><code class="language-plaintext highlighter-rouge">Plugin 'pangloss/vim-javascript'</code></p>
<p><img src="/assets/img/0002.png" alt="image-title-here" class="img-responsive" /></p>
<p>Then we need to install the plugin using vundle. Start Vim and type <code class="language-plaintext highlighter-rouge">:PluginInstall</code> command. The plugin is installed:</p>
<p><img src="/assets/img/0003.png" alt="image-title-here" class="img-responsive" /></p>
<p>Before:
<img src="/assets/img/0004.png" alt="image-title-here" class="img-responsive" /></p>
<p>After:
<img src="/assets/img/0008.png" alt="image-title-here" class="img-responsive" /></p>
<p>Now it looks better.</p>
<h2 id="snippets">Snippets</h2>
<p>Snippets make coding faster. You can quickly insert loops, conditions, functions and other language constructions by using hotkeys.</p>
<p>We need to these plugins:
<a href="https://github.com/garbas/vim-snipmate">https://github.com/garbas/vim-snipmate</a>
<a href="https://github.com/grvcoelho/vim-javascript-snippets">https://github.com/grvcoelho/vim-javascript-snippets</a></p>
<p>Add to <code class="language-plaintext highlighter-rouge">.vimrc</code>:</p>
<figure class="highlight"><pre><code class="language-plain" data-lang="plain">Plugin 'MarcWeber/vim-addon-mw-utils'
Plugin 'tomtom/tlib_vim'
Plugin 'garbas/vim-snipmate'
Plugin 'grvcoelho/vim-javascript-snippets'</code></pre></figure>
<p>Also remap the hotkey to <code class="language-plaintext highlighter-rouge">Ctrl+j</code></p>
<figure class="highlight"><pre><code class="language-plain" data-lang="plain">imap <C-J> <esc>a<Plug>snipMateNextOrTrigger
smap <C-J> <Plug>snipMateNextOrTrigger</code></pre></figure>
<p><img src="/assets/img/0001.gif" alt="image-title-here" class="img-responsive" /></p>
<p>It works!</p>
<h2 id="lint">Lint</h2>
<p>A lint checks a source code for bugs, stylistic errors. It’s an important tool for writing high-quality code.</p>
<p>ALE is a modern lint plugin for Vim. ALE checks your code in the real time mode (while you edit your code). Actually, ALE is a layer between Vim and a lint tool. We will use ESlint as a lint tool for a JS code.</p>
<p>Add to <code class="language-plaintext highlighter-rouge">.vimrc</code>:</p>
<figure class="highlight"><pre><code class="language-plain" data-lang="plain">Plugin 'w0rp/ale'</code></pre></figure>
<p>Run <code class="language-plaintext highlighter-rouge">:PluginInstall</code></p>
<h3 id="configure-eslint">Configure ESLint:</h3>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nb">mkdir </span>lintTest</code></pre></figure>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nb">cd </span>lintTest</code></pre></figure>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">npm init</code></pre></figure>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">npm <span class="nb">install </span>eslint <span class="nt">--save-dev</span></code></pre></figure>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">./node_modules/.bin/eslint <span class="nt">--init</span></code></pre></figure>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">vim index.js</code></pre></figure>
<p><img src="/assets/img/0002.gif" alt="image-title-here" class="img-responsive" /></p>
<p>The lint works but I would like to adjust messages style. I added these lines to <code class="language-plaintext highlighter-rouge">.vimrc</code>:</p>
<figure class="highlight"><pre><code class="language-plain" data-lang="plain">let g:ale_echo_msg_error_str = 'E'
let g:ale_echo_msg_warning_str = 'W'
let g:ale_echo_msg_format = '[%linter%] %s [%severity%]'</code></pre></figure>
<p><img src="/assets/img/0006.png" alt="image-title-here" class="img-responsive" /></p>
<h2 id="line-numbers">Line numbers</h2>
<p>Line numbers are disabled by default.</p>
<p>Add this to <code class="language-plaintext highlighter-rouge">.vimrc</code>:</p>
<figure class="highlight"><pre><code class="language-plain" data-lang="plain">set number</code></pre></figure>
<p><img src="/assets/img/0007.png" alt="image-title-here" class="img-responsive" /></p>
<h2 id="code-formatter">Code formatter</h2>
<p>A code formatter (a code beautifier) converts your code into the correct format. You can quickly write some code and to format it with just one click. ESLint and ALE will do this job.</p>
<p>These options activate code formatting on saving a file:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nb">let </span>b:ale_fixers <span class="o">=</span> <span class="o">[</span><span class="s1">'eslint'</span><span class="o">]</span>
<span class="nb">let </span>g:ale_fix_on_save <span class="o">=</span> 1</code></pre></figure>
<p><img src="/assets/img/0003.gif" alt="image-title-here" class="img-responsive" /></p>
<h2 id="autocomplete">Autocomplete</h2>
<p>Autocomplete increases your typing speed. It predicts the word a user intends to enter.
Install plugin dependencies:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nb">sudo </span>apt-get <span class="nb">install </span>build-essential cmake
<span class="nb">sudo </span>apt-get <span class="nb">install </span>python-dev python3-dev</code></pre></figure>
<p>Install the plugin:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">Plugin <span class="s1">'Valloric/YouCompleteMe'</span></code></pre></figure>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">:PluginInstall</code></pre></figure>
<p>YCM has a client-server architecture. The commands above installs the client. Here we install YCM server:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nb">cd</span> ~/.vim/bundle/YouCompleteMe
./install.py <span class="nt">--all</span></code></pre></figure>
<p>Cool, it works!</p>
<p><img src="/assets/img/0004.gif" alt="image-title-here" class="img-responsive" /></p>
<h2 id="file-explorer">File explorer</h2>
<p>NERDTree is a file system explorer
<a href="https://github.com/scrooloose/nerdtree">https://github.com/scrooloose/nerdtree</a></p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">Plugin <span class="s1">'scrooloose/nerdtree'</span></code></pre></figure>
<p>I added this to my <code class="language-plaintext highlighter-rouge">.vimrc</code> to open <code class="language-plaintext highlighter-rouge">NERDTree</code> with Ctrl+n:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="s2">" NERDTress Ctrl+n
map <C-n> :NERDTreeToggle<CR>
"</span> NERDTress File highlighting</code></pre></figure>
<p>These line configure different highlighting for different file extensions:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="k">function</span><span class="o">!</span> NERDTreeHighlightFile<span class="o">(</span>extension, <span class="nb">fg</span>, <span class="nb">bg</span>, guifg, guibg<span class="o">)</span>
<span class="nb">exec</span> <span class="s1">'autocmd filetype nerdtree highlight '</span> <span class="nb">.</span> a:extension .<span class="s1">' ctermbg='</span><span class="nb">.</span> a:bg .<span class="s1">' ctermfg='</span><span class="nb">.</span> a:fg .<span class="s1">' guibg='</span><span class="nb">.</span> a:guibg .<span class="s1">' guifg='</span><span class="nb">.</span> a:guifg
<span class="nb">exec</span> <span class="s1">'autocmd filetype nerdtree syn match '</span> <span class="nb">.</span> a:extension .<span class="s1">' #^\s\+.*'</span><span class="nb">.</span> a:extension .<span class="s1">'$#'</span>
endfunction
call NERDTreeHighlightFile<span class="o">(</span><span class="s1">'jade'</span>, <span class="s1">'green'</span>, <span class="s1">'none'</span>, <span class="s1">'green'</span>, <span class="s1">'#151515'</span><span class="o">)</span>
call NERDTreeHighlightFile<span class="o">(</span><span class="s1">'ini'</span>, <span class="s1">'yellow'</span>, <span class="s1">'none'</span>, <span class="s1">'yellow'</span>, <span class="s1">'#151515'</span><span class="o">)</span>
call NERDTreeHighlightFile<span class="o">(</span><span class="s1">'md'</span>, <span class="s1">'blue'</span>, <span class="s1">'none'</span>, <span class="s1">'#3366FF'</span>, <span class="s1">'#151515'</span><span class="o">)</span>
call NERDTreeHighlightFile<span class="o">(</span><span class="s1">'yml'</span>, <span class="s1">'yellow'</span>, <span class="s1">'none'</span>, <span class="s1">'yellow'</span>, <span class="s1">'#151515'</span><span class="o">)</span>
call NERDTreeHighlightFile<span class="o">(</span><span class="s1">'config'</span>, <span class="s1">'yellow'</span>, <span class="s1">'none'</span>, <span class="s1">'yellow'</span>, <span class="s1">'#151515'</span><span class="o">)</span>
call NERDTreeHighlightFile<span class="o">(</span><span class="s1">'conf'</span>, <span class="s1">'yellow'</span>, <span class="s1">'none'</span>, <span class="s1">'yellow'</span>, <span class="s1">'#151515'</span><span class="o">)</span>
call NERDTreeHighlightFile<span class="o">(</span><span class="s1">'json'</span>, <span class="s1">'yellow'</span>, <span class="s1">'none'</span>, <span class="s1">'yellow'</span>, <span class="s1">'#151515'</span><span class="o">)</span>
call NERDTreeHighlightFile<span class="o">(</span><span class="s1">'html'</span>, <span class="s1">'yellow'</span>, <span class="s1">'none'</span>, <span class="s1">'yellow'</span>, <span class="s1">'#151515'</span><span class="o">)</span>
call NERDTreeHighlightFile<span class="o">(</span><span class="s1">'styl'</span>, <span class="s1">'cyan'</span>, <span class="s1">'none'</span>, <span class="s1">'cyan'</span>, <span class="s1">'#151515'</span><span class="o">)</span>
call NERDTreeHighlightFile<span class="o">(</span><span class="s1">'css'</span>, <span class="s1">'cyan'</span>, <span class="s1">'none'</span>, <span class="s1">'cyan'</span>, <span class="s1">'#151515'</span><span class="o">)</span>
call NERDTreeHighlightFile<span class="o">(</span><span class="s1">'coffee'</span>, <span class="s1">'Red'</span>, <span class="s1">'none'</span>, <span class="s1">'red'</span>, <span class="s1">'#151515'</span><span class="o">)</span>
call NERDTreeHighlightFile<span class="o">(</span><span class="s1">'js'</span>, <span class="s1">'Red'</span>, <span class="s1">'none'</span>, <span class="s1">'#ffa500'</span>, <span class="s1">'#151515'</span><span class="o">)</span>
call NERDTreeHighlightFile<span class="o">(</span><span class="s1">'php'</span>, <span class="s1">'Magenta'</span>, <span class="s1">'none'</span>, <span class="s1">'#ff00ff'</span>, <span class="s1">'#151515'</span><span class="o">)</span></code></pre></figure>
<p><img src="/assets/img/0009.png" alt="image-title-here" class="img-responsive" /></p>
<h2 id="system-clipboard">System clipboard</h2>
<p><a href="https://github.com/christoomey/vim-system-copy">System copy</a> provides copying/pasting text to the system clipboard.</p>
<p>Install dependencies:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">apt-get <span class="nb">install </span>xsel</code></pre></figure>
<p>Add <code class="language-plaintext highlighter-rouge">Plugin 'christoomey/vim-system-copy'</code> to <code class="language-plaintext highlighter-rouge">.vimrc</code>, run <code class="language-plaintext highlighter-rouge">:PluginInstall</code>.</p>
<p>Use <code class="language-plaintext highlighter-rouge">cp</code> to copy into your system clipboard and <code class="language-plaintext highlighter-rouge">cv</code> to paste from system clipboard.</p>
<h2 id="my-current-vimrc">My current .vimrc</h2>
<p>You can find the latest version of my .vimrc in my repository: <a href="https://github.com/maxim-danilov/vim-config-maxim-danilov">https://github.com/maxim-danilov/vim-config-maxim-danilov</a></p>
<h2 id="conclusion">Conclusion</h2>
<p>We just made a good tool to write a JS code and edit any config files. It’s lightweight, fast, сustomizable and I can use it on any device via SSH.</p>Maxim DanilovAdjust your touchpad on Linux using xinput2018-07-06T11:50:30+00:002018-07-06T11:50:30+00:00https://maxim-danilov.github.io/adjust-your-touchpad-on-linux-using-xinput<p>Linux systems support most devices right out of the box. But default configurations of input devices are not always fine. Though Ubuntu has GUI settings to configure your pointing device they’re not enough:</p>
<p><img src="/assets/img/notcompressed/0021.png" alt="image-title-here" class="img-responsive" /></p>
<p>So you can’t remap buttons, set scrolling speed, tap time and etc using the settings.</p>
<p>We’re going to adjust your touchpad using <code class="language-plaintext highlighter-rouge">xinput</code> utility.</p>
<h3 id="get-input-device-list">Get input device list:</h3>
<p>This command shows your input device list:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">xinput <span class="nt">--list</span></code></pre></figure>
<p>My touchpad has name <code class="language-plaintext highlighter-rouge">Maxim Danilov’s Trackpad</code>:
<img src="/assets/img/notcompressed/0017.png" alt="image-title-here" class="img-responsive" /></p>
<h3 id="get-properties-list-of-your-input-device">Get properties list of your input device:</h3>
<p>Next we retrieve property list of the touchpad:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">xinput <span class="nt">--list-props</span> <span class="s1">'Maxim Danilov’s Trackpad'</span></code></pre></figure>
<p><img src="/assets/img/notcompressed/0018.png" alt="image-title-here" class="img-responsive" /></p>
<h3 id="adjust-the-properties-of-your-input-device">Adjust the properties of your input device:</h3>
<p>I’d like to increase my pointer speed using <code class="language-plaintext highlighter-rouge">Device Accel Constant Deceleration</code> property. The default value of the property is 2.5. I will change it to 0.1 that will increase speed.</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">xinput <span class="nt">--set-prop</span> <span class="s1">'Maxim Danilov’s Trackpad'</span> <span class="s1">'Device Accel Constant Deceleration'</span> 0.1</code></pre></figure>
<p><img src="/assets/img/notcompressed/0020.png" alt="image-title-here" class="img-responsive" /></p>
<h3 id="make-your-xinput-commands-permanent">Make your xinput commands permanent</h3>
<p>Xinput resets your adjustments after reboot. We can make the adjustment permanent using <code class="language-plaintext highlighter-rouge">~/.xsessionrc</code>. Just put your xinput commands to <code class="language-plaintext highlighter-rouge">~/.xsessionrc</code> file.</p>Maxim Danilov