<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: t-o-d</title>
    <description>The latest articles on Forem by t-o-d (@kamekuremaisuke).</description>
    <link>https://forem.com/kamekuremaisuke</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F450008%2F4266bd52-0cf4-476a-8ce1-72c723e3c19a.png</url>
      <title>Forem: t-o-d</title>
      <link>https://forem.com/kamekuremaisuke</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/kamekuremaisuke"/>
    <language>en</language>
    <item>
      <title>Split CSV by number in shell only.</title>
      <dc:creator>t-o-d</dc:creator>
      <pubDate>Wed, 27 Jan 2021 08:13:53 +0000</pubDate>
      <link>https://forem.com/kamekuremaisuke/split-csv-by-number-in-shell-only-1255</link>
      <guid>https://forem.com/kamekuremaisuke/split-csv-by-number-in-shell-only-1255</guid>
      <description>&lt;ul&gt;
&lt;li&gt;Sometimes I have to deal with large CSV files.&lt;/li&gt;
&lt;li&gt;In this case, dividing and foldering in advance will make it easier to handle.&lt;/li&gt;
&lt;li&gt;This section describes how to split files and classify folders according to the number of lines using only Shell.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Result
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;The following is the directory structure before execution.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;.&lt;/span&gt;
├── sample.csv
├── main.sh
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;The following is the description of &lt;code&gt;main.sh&lt;/code&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;sample.csv has 100 rows of data&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;※Error handling is omitted.&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;#!/bin/sh&lt;/span&gt;
&lt;span class="nb"&gt;set&lt;/span&gt; &lt;span class="nt"&gt;-e&lt;/span&gt;

&lt;span class="c"&gt;# file path&lt;/span&gt;
&lt;span class="o"&gt;[&lt;/span&gt; &lt;span class="o"&gt;!&lt;/span&gt; &lt;span class="nt"&gt;-e&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$1&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt; &lt;span class="o"&gt;]&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nb"&gt;exit &lt;/span&gt;1 &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="nv"&gt;datafile&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$1&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;
&lt;span class="c"&gt;# File extension deletion&lt;/span&gt;
&lt;span class="nv"&gt;filename&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;datafile&lt;/span&gt;&lt;span class="p"&gt;%.*&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;
&lt;span class="c"&gt;# Get number of lines&lt;/span&gt;
&lt;span class="nv"&gt;row&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="si"&gt;$(&lt;/span&gt;&lt;span class="nb"&gt;grep&lt;/span&gt; &lt;span class="nt"&gt;-c&lt;/span&gt; &lt;span class="s1"&gt;''&lt;/span&gt; &lt;span class="nv"&gt;$datafile&lt;/span&gt;&lt;span class="si"&gt;)&lt;/span&gt;
&lt;span class="c"&gt;# Obtaining the number of splits&lt;/span&gt;
&lt;span class="nv"&gt;sep&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$2&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;
&lt;span class="c"&gt;# Number of directories created&lt;/span&gt;
&lt;span class="nv"&gt;dir_cnt&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="si"&gt;$(&lt;/span&gt;&lt;span class="nb"&gt;awk&lt;/span&gt; &lt;span class="nt"&gt;-v&lt;/span&gt; &lt;span class="nv"&gt;row&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$row&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt; &lt;span class="nt"&gt;-v&lt;/span&gt; &lt;span class="nv"&gt;sep&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$sep&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt; &lt;span class="s1"&gt;'BEGIN {
    i=row/sep
    printf("%d\n",i+=i&amp;lt;0?0:0.999)
    }
    '&lt;/span&gt;
&lt;span class="si"&gt;)&lt;/span&gt;
&lt;span class="c"&gt;# Folder creation&lt;/span&gt;
&lt;span class="nb"&gt;seq&lt;/span&gt; &lt;span class="nt"&gt;-f&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;filename&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;_%01.0f"&lt;/span&gt; 1 &lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;dir_cnt&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt; |
xargs &lt;span class="nb"&gt;mkdir&lt;/span&gt; &lt;span class="nt"&gt;-p&lt;/span&gt;
&lt;span class="c"&gt;# File division&lt;/span&gt;
&lt;span class="nb"&gt;split&lt;/span&gt; &lt;span class="nt"&gt;-l&lt;/span&gt; &lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;sep&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt; &lt;span class="nt"&gt;-a&lt;/span&gt; 2 &lt;span class="nv"&gt;$datafile&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;filename&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;_"&lt;/span&gt;
&lt;span class="c"&gt;# File movement&lt;/span&gt;
&lt;span class="nv"&gt;count&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;1
&lt;span class="k"&gt;for &lt;/span&gt;i &lt;span class="k"&gt;in&lt;/span&gt; &lt;span class="sb"&gt;`&lt;/span&gt;find &lt;span class="nb"&gt;.&lt;/span&gt; &lt;span class="nt"&gt;-type&lt;/span&gt; f &lt;span class="nt"&gt;-name&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;filename&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;_*"&lt;/span&gt; | &lt;span class="nb"&gt;sort&lt;/span&gt;&lt;span class="sb"&gt;`&lt;/span&gt;
&lt;span class="k"&gt;do
    &lt;/span&gt;&lt;span class="nb"&gt;mv&lt;/span&gt; &lt;span class="nv"&gt;$i&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;filename&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;_&lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;count&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;/&lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;i&lt;/span&gt;&lt;span class="p"&gt;//_*/_&lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;count&lt;/span&gt;&lt;span class="k"&gt;}}&lt;/span&gt;&lt;span class="s2"&gt;.csv"&lt;/span&gt;
    &lt;span class="nb"&gt;let &lt;/span&gt;count++
&lt;span class="k"&gt;done&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Run as follows.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;sh main.sh sample.csv 25
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;After executing, check that the directory structure is as follows.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.
├── main.sh
├── sample.csv
├── sample_1
│   ├── sample_1.csv
├── sample_2
│   ├── sample_2.csv
├── sample_3
│   ├── sample3.csv
├── sample_4
│   ├── sample4.csv
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Supplement
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Number of created directories
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Rounding up&lt;/strong&gt;

&lt;ul&gt;
&lt;li&gt;In the case of a decimal number such as &lt;code&gt;100/15&lt;/code&gt;, the directory is not created normally.&lt;/li&gt;
&lt;li&gt;Round up to an integer with &lt;code&gt;printf&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  File splitting and moving
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Extension is added by mv.&lt;/strong&gt;

&lt;ul&gt;
&lt;li&gt;Additional extension (&lt;code&gt;--additional-suffix&lt;/code&gt;) in split is not the default on Mac etc.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Link
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://pubs.opengroup.org/onlinepubs/9699919799/utilities/split.html"&gt;split&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://unix.stackexchange.com/questions/32626/split-a-file-by-line-and-have-control-over-resulting-files-extension"&gt;https://unix.stackexchange.com/questions/32626/split-a-file-by-line-and-have-control-over-resulting-files-extension&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>linux</category>
      <category>bash</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Prepare a set of Rust tools that can be used with zsh in zinit</title>
      <dc:creator>t-o-d</dc:creator>
      <pubDate>Tue, 19 Jan 2021 02:01:22 +0000</pubDate>
      <link>https://forem.com/kamekuremaisuke/prepare-a-set-of-rust-tools-that-can-be-used-with-zsh-in-zinit-49ae</link>
      <guid>https://forem.com/kamekuremaisuke/prepare-a-set-of-rust-tools-that-can-be-used-with-zsh-in-zinit-49ae</guid>
      <description>&lt;ul&gt;
&lt;li&gt;I was using &lt;strong&gt;oh-my-zsh&lt;/strong&gt; as a plugin manager to extend zsh, which has become the standard shell for Macs, but changed to a lightweight tool called &lt;a href="https://github.com/zdharma/zinit"&gt;zinit&lt;/a&gt; in terms of operation.&lt;/li&gt;
&lt;li&gt;At the same time, it turned out that I could use the Rust command tools that I usually use (&lt;strong&gt;ripgrep and exa&lt;/strong&gt;).&lt;/li&gt;
&lt;li&gt;In this article, we will describe how to set up &lt;strong&gt;zinit&lt;/strong&gt; and configure the tools.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Environment
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Mac OS X 10.15.6&lt;/li&gt;
&lt;li&gt;ZSH 5.7.1&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Procedure
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Install zinit
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Install &lt;strong&gt;&lt;a href="https://github.com/zdharma/zinit"&gt;zinit&lt;/a&gt;&lt;/strong&gt; (a lightweight and fast zsh plugin management tool) in your environment with the following command.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;sh &lt;span class="nt"&gt;-c&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="si"&gt;$(&lt;/span&gt;curl &lt;span class="nt"&gt;-fsSL&lt;/span&gt; https://raw.githubusercontent.com/zdharma/zinit/master/doc/install.sh&lt;span class="si"&gt;)&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;After entering the command, the following information will be automatically entered in &lt;code&gt;~/.zshrc&lt;/code&gt;.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;### Added by Zinit's installer&lt;/span&gt;

&lt;span class="c"&gt;# ...............&lt;/span&gt;

&lt;span class="nb"&gt;source&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$HOME&lt;/span&gt;&lt;span class="s2"&gt;/.zinit/bin/zinit.zsh"&lt;/span&gt;
autoload &lt;span class="nt"&gt;-Uz&lt;/span&gt; _zinit
&lt;span class="c"&gt;### End of Zinit's installer chunk&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Update manually with the following command.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;zinit self-update
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Selecting a tool
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;This time, the Rust command tools managed by zinit are as follows.

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://github.com/BurntSushi/ripgrep"&gt;ripgrep&lt;/a&gt;

&lt;ul&gt;
&lt;li&gt;Fast grep alternative tool&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/ogham/exa"&gt;exa&lt;/a&gt;

&lt;ul&gt;
&lt;li&gt;Fast ls alternative tool&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/sharkdp/bat"&gt;bat&lt;/a&gt;

&lt;ul&gt;
&lt;li&gt;Fast cat alternative tool&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/sharkdp/fd"&gt;fd&lt;/a&gt;

&lt;ul&gt;
&lt;li&gt;Fast find alternative tool&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Setting up zshrc
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;After completing the tool selection, describe the following plug-in contents in &lt;code&gt;.zshrc&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;### Added by Zinit's installer&lt;/span&gt;
&lt;span class="c"&gt;# ....&lt;/span&gt;
&lt;span class="c"&gt;### End of Zinit's installer chunk&lt;/span&gt;

&lt;span class="c"&gt;# ripgrep&lt;/span&gt;
zinit ice as&lt;span class="s2"&gt;"program"&lt;/span&gt; from&lt;span class="s2"&gt;"gh-r"&lt;/span&gt; &lt;span class="nb"&gt;mv&lt;/span&gt;&lt;span class="s2"&gt;"ripgrep* -&amp;gt; rg"&lt;/span&gt; pick&lt;span class="s2"&gt;"rg/rg"&lt;/span&gt;
zinit light BurntSushi/ripgrep

&lt;span class="c"&gt;# exa&lt;/span&gt;
zinit ice as&lt;span class="s2"&gt;"program"&lt;/span&gt; from&lt;span class="s2"&gt;"gh-r"&lt;/span&gt; &lt;span class="nb"&gt;mv&lt;/span&gt;&lt;span class="s2"&gt;"exa* -&amp;gt; exa"&lt;/span&gt;
zinit light ogham/exa

&lt;span class="c"&gt;# bat&lt;/span&gt;
zinit ice as&lt;span class="s2"&gt;"program"&lt;/span&gt; from&lt;span class="s2"&gt;"gh-r"&lt;/span&gt; &lt;span class="nb"&gt;mv&lt;/span&gt;&lt;span class="s2"&gt;"bat* -&amp;gt; bat"&lt;/span&gt; pick&lt;span class="s2"&gt;"bat/bat"&lt;/span&gt;
zinit light sharkdp/bat

&lt;span class="c"&gt;# fd&lt;/span&gt;
zinit ice as&lt;span class="s2"&gt;"program"&lt;/span&gt; from&lt;span class="s2"&gt;"gh-r"&lt;/span&gt; &lt;span class="nb"&gt;mv&lt;/span&gt;&lt;span class="s2"&gt;"fd* -&amp;gt; fd"&lt;/span&gt; pick&lt;span class="s2"&gt;"fd/fd"&lt;/span&gt;
zinit light sharkdp/fd
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;After saving, load it with the following command
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;source&lt;/span&gt; ~/.zshrc
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;The tool will start downloading, and after it finishes, enter the various commands.

&lt;ul&gt;
&lt;li&gt;ripgrep : &lt;code&gt;rg word&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;bat : &lt;code&gt;bat filename&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;Once confirmed, you are done.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Link
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://github.com/zdharma/zinit"&gt;Github&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://zdharma.org/zinit/wiki/"&gt;Document&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/zdharma/zinit/issues/278"&gt;https://github.com/zdharma/zinit/issues/278&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>zsh</category>
      <category>rust</category>
      <category>beginners</category>
      <category>webdev</category>
    </item>
    <item>
      <title>【Mac】Regular Expressions for exact matching as words with grep and sed</title>
      <dc:creator>t-o-d</dc:creator>
      <pubDate>Mon, 18 Jan 2021 11:40:27 +0000</pubDate>
      <link>https://forem.com/kamekuremaisuke/mac-regular-expressions-for-exact-matching-as-words-with-grep-and-sed-499m</link>
      <guid>https://forem.com/kamekuremaisuke/mac-regular-expressions-for-exact-matching-as-words-with-grep-and-sed-499m</guid>
      <description>&lt;ul&gt;
&lt;li&gt;When we use grep or sed in our business, we often use word matching to search and replace.&lt;/li&gt;
&lt;li&gt;In this case, it is not uncommon that the exact match is not found.&lt;/li&gt;
&lt;li&gt;In this article, we will record the regular expression notation for doing so with a high probability of an exact match.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Result
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;A description of the results is given first.

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;※It is designed to work with BSD-style grep and sed on Mac.&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# Data Example&lt;/span&gt;
&lt;span class="nv"&gt;$ &lt;/span&gt;&lt;span class="nb"&gt;cat &lt;/span&gt;data

10,30,50,100,150,250,300,500

&lt;span class="c"&gt;# grep only 50 of the data examples&lt;/span&gt;
&lt;span class="nv"&gt;$ &lt;/span&gt;&lt;span class="nb"&gt;cat &lt;/span&gt;data | &lt;span class="nb"&gt;grep&lt;/span&gt; &lt;span class="nt"&gt;-o&lt;/span&gt; &lt;span class="s1"&gt;'[[:&amp;lt;:]]50[[:&amp;gt;:]]'&lt;/span&gt;

50

&lt;span class="c"&gt;# Replace only 50 of the example data with "match".&lt;/span&gt;
&lt;span class="nv"&gt;$ &lt;/span&gt;&lt;span class="nb"&gt;cat &lt;/span&gt;data.txt | &lt;span class="nb"&gt;sed&lt;/span&gt; &lt;span class="s1"&gt;'s;[[:&amp;lt;:]]50[[:&amp;gt;:]];match;g'&lt;/span&gt;

10,30,match,100,150,250,300,500
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Description
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;The above example shows the process of search and replace for arbitrary data.&lt;/li&gt;
&lt;li&gt;The method used here is to enclose the word like &lt;code&gt;[[:&amp;lt;:]]word[[:&amp;gt;:]]&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  grep
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;In the first place, grep extracts not only words but also lines.&lt;/li&gt;
&lt;li&gt;To extract only words, use option and use &lt;code&gt;grep -o word&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;However, in the above data example, there is a partial match as shown below, and four are extracted.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;&lt;span class="nb"&gt;cat &lt;/span&gt;data | &lt;span class="nb"&gt;grep&lt;/span&gt; &lt;span class="nt"&gt;-o&lt;/span&gt; 50

50
50
50
50
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;From these things, we use the &lt;code&gt;[[:&amp;lt;:]]word[[:&amp;gt;:]]&lt;/code&gt; which has the following meanings.

&lt;ul&gt;
&lt;li&gt;Since it matches the beginning and end of a word, it does not recognize the character strings before and after.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  sed
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;The same is true for sed. If you replace it with the string as it is, it will be replaced 4 times.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;&lt;span class="nb"&gt;cat &lt;/span&gt;data.txt | &lt;span class="nb"&gt;sed&lt;/span&gt; &lt;span class="s1"&gt;'s;50;match;g'&lt;/span&gt;

10,30,match,100,1match,2match,300,match0
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;From these things, it is necessary to recognize it as a word like &lt;code&gt;[[:&amp;lt;:]]word[[:&amp;gt;:]]&lt;/code&gt; like grep.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;From the above, I was reminded of further study of regular expressions, conscious of data duplication.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Link
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://dev.mysql.com/doc/refman/5.6/en/regexp.html"&gt;https://dev.mysql.com/doc/refman/5.6/en/regexp.html&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>beginners</category>
      <category>bash</category>
      <category>unix</category>
      <category>regularexpression</category>
    </item>
    <item>
      <title>Mac hardware and system information retrieval one-liner</title>
      <dc:creator>t-o-d</dc:creator>
      <pubDate>Sat, 31 Oct 2020 12:07:47 +0000</pubDate>
      <link>https://forem.com/kamekuremaisuke/mac-hardware-and-system-information-retrieval-one-liner-4ohc</link>
      <guid>https://forem.com/kamekuremaisuke/mac-hardware-and-system-information-retrieval-one-liner-4ohc</guid>
      <description>&lt;ul&gt;
&lt;li&gt;When I use Mac, there are times when I want to get system information and so on by command.&lt;/li&gt;
&lt;li&gt;Also, you may want to use that information in shellscript.&lt;/li&gt;
&lt;li&gt;In this article, we will write commands to obtain hardware and system information from your Mac.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Result
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Here are the results.&lt;/li&gt;
&lt;li&gt;Enter each command based on the information you want to retrieve.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Model Name
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# model name&lt;/span&gt;
&lt;span class="c"&gt;# output : MacBook Pro**&lt;/span&gt;

&lt;span class="nv"&gt;info&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="si"&gt;$(&lt;/span&gt;system_profiler SPHardwareDataType | &lt;span class="nb"&gt;grep&lt;/span&gt; &lt;span class="s1"&gt;'Model Identifier'&lt;/span&gt;&lt;span class="si"&gt;)&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;info&lt;/span&gt;&lt;span class="p"&gt;#*&lt;/span&gt;:&lt;span class="p"&gt; &lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Processor
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# processor&lt;/span&gt;
&lt;span class="c"&gt;# output : Dual-Core Intel **&lt;/span&gt;
&lt;span class="nv"&gt;info&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="si"&gt;$(&lt;/span&gt;system_profiler SPHardwareDataType | &lt;span class="nb"&gt;grep&lt;/span&gt; &lt;span class="s1"&gt;'Processor Name'&lt;/span&gt;&lt;span class="si"&gt;)&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;info&lt;/span&gt;&lt;span class="p"&gt;#*&lt;/span&gt;:&lt;span class="p"&gt; &lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Core
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# core&lt;/span&gt;
&lt;span class="c"&gt;# output : 2&lt;/span&gt;
&lt;span class="nv"&gt;info&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="si"&gt;$(&lt;/span&gt;system_profiler SPHardwareDataType | &lt;span class="nb"&gt;grep&lt;/span&gt; &lt;span class="s1"&gt;'Cores'&lt;/span&gt;&lt;span class="si"&gt;)&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;info&lt;/span&gt;&lt;span class="p"&gt;#*&lt;/span&gt;:&lt;span class="p"&gt; &lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Serial Number
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# serial number&lt;/span&gt;
&lt;span class="c"&gt;# output : *****&lt;/span&gt;
&lt;span class="nv"&gt;info&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="si"&gt;$(&lt;/span&gt;system_profiler SPHardwareDataType | &lt;span class="nb"&gt;grep&lt;/span&gt; &lt;span class="s1"&gt;'Serial Number'&lt;/span&gt;&lt;span class="si"&gt;)&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;info&lt;/span&gt;&lt;span class="p"&gt;#*&lt;/span&gt;:&lt;span class="p"&gt; &lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  UUID
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# UUID&lt;/span&gt;
&lt;span class="c"&gt;# output : *****-*****-****&lt;/span&gt;
&lt;span class="nv"&gt;info&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="si"&gt;$(&lt;/span&gt;system_profiler SPHardwareDataType | &lt;span class="nb"&gt;grep&lt;/span&gt; &lt;span class="s1"&gt;'UUID'&lt;/span&gt;&lt;span class="si"&gt;)&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;info&lt;/span&gt;&lt;span class="p"&gt;#*&lt;/span&gt;:&lt;span class="p"&gt; &lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Memory
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# memory information&lt;/span&gt;
&lt;span class="c"&gt;# output : ** GB&lt;/span&gt;
&lt;span class="nv"&gt;info&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="si"&gt;$(&lt;/span&gt;system_profiler SPHardwareDataType | &lt;span class="nb"&gt;grep&lt;/span&gt; &lt;span class="s1"&gt;'Memory'&lt;/span&gt;&lt;span class="si"&gt;)&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;info&lt;/span&gt;&lt;span class="p"&gt;#*&lt;/span&gt;:&lt;span class="p"&gt; &lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  User
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# user information&lt;/span&gt;
&lt;span class="c"&gt;# output : **** *** (*******)&lt;/span&gt;
&lt;span class="nv"&gt;info&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="si"&gt;$(&lt;/span&gt;system_profiler SPSoftwareDataType | &lt;span class="nb"&gt;grep&lt;/span&gt; &lt;span class="s1"&gt;'User Name'&lt;/span&gt;&lt;span class="si"&gt;)&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;info&lt;/span&gt;&lt;span class="p"&gt;#*&lt;/span&gt;:&lt;span class="p"&gt; &lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Supplement
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;For ease of use, the fetched content only outputs the results.&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;Use shall be in the following format.

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;info=$(system_profiler data-type-name | grep 'field-name'); echo "${info#*: }"&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;The above &lt;strong&gt;data-type-name&lt;/strong&gt; and &lt;strong&gt;field-names&lt;/strong&gt; are confirmed by the following command.

&lt;ul&gt;
&lt;li&gt;data-type-name : &lt;code&gt;system_profiler -listDataTypes&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;field-name : &lt;code&gt;system_profiler data-type-name&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;Other information that can be obtained with system_profiler can be found &lt;a href="https://ss64.com/osx/system_profiler.html"&gt;here&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Link
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://ss64.com/osx/system_profiler.html"&gt;https://ss64.com/osx/system_profiler.html&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>shell</category>
      <category>mac</category>
      <category>bash</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Tips for writing npm-scripts in npm-run-all for different purposes.</title>
      <dc:creator>t-o-d</dc:creator>
      <pubDate>Wed, 07 Oct 2020 00:07:04 +0000</pubDate>
      <link>https://forem.com/kamekuremaisuke/tips-for-writing-npm-scripts-in-npm-run-all-for-different-purposes-5cg5</link>
      <guid>https://forem.com/kamekuremaisuke/tips-for-writing-npm-scripts-in-npm-run-all-for-different-purposes-5cg5</guid>
      <description>&lt;ul&gt;
&lt;li&gt;The &lt;strong&gt;npm-scripts&lt;/strong&gt; are used in &lt;code&gt;package.json&lt;/code&gt; for task processing in web development.&lt;/li&gt;
&lt;li&gt;We also use &lt;strong&gt;npm-run-all&lt;/strong&gt;, which is useful for serialization and parallelization of multiple processes.&lt;/li&gt;
&lt;li&gt;Therefore, we'll use it to illustrate a small technique to make npm-scripts &lt;strong&gt;flexible and clear&lt;/strong&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Result
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;A description of the results is given first.&lt;/li&gt;
&lt;li&gt;The following &lt;code&gt;package.json&lt;/code&gt; is a task to mainly build and watch.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"scripts"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build"&lt;/span&gt;&lt;span class="w"&gt;      &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"run-s build:{sass,ts}"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build:sass"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"sass input.scss output.css"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build:ts"&lt;/span&gt;&lt;span class="w"&gt;   &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"tsc main.ts"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"watch"&lt;/span&gt;&lt;span class="w"&gt;      &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"run-s watch:{sass,ts}"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"watch:sass"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"sass --watch input.scss output.css"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"watch:ts"&lt;/span&gt;&lt;span class="w"&gt;   &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"tsc -w main.ts"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h2&gt;
  
  
  Description
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;The method used here is to specify what to do with &lt;strong&gt;the process in braces&lt;/strong&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Specification using braces
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;There are three ways to execute a task classified by group in a colon (:) in a single session.

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;build-basic&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;build-glob&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;build-brace&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"scripts"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build-basic"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"run-s build:sass build:ts"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build-glob"&lt;/span&gt;&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"run-s build:*"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build-brace"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"run-s build:{sass,ts}"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build:sass"&lt;/span&gt;&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"sass input.scss output.css"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build:ts"&lt;/span&gt;&lt;span class="w"&gt;    &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"tsc main.ts"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;From these I use the method specified in braces, such as &lt;strong&gt;build-brace&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;The benefits are as follows.

&lt;ul&gt;
&lt;li&gt;unduplicated

&lt;ul&gt;
&lt;li&gt;There is no duplication of tasks like &lt;code&gt;run-s build:sass build:ts&lt;/code&gt;, and if the number of tasks increases in the future, you only need to describe the purpose of the task.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;clarification

&lt;ul&gt;
&lt;li&gt;Compared to an asterisk specification such as &lt;code&gt;run-s build:*&lt;/code&gt;, the explicit description makes the process easier to understand.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;ordering

&lt;ul&gt;
&lt;li&gt;The processes are performed in the order of the braces, so even if you reverse &lt;code&gt;build:sass&lt;/code&gt; and &lt;code&gt;build:ts&lt;/code&gt; in &lt;code&gt;package.json&lt;/code&gt;, there is no problem.

&lt;ul&gt;
&lt;li&gt;If you use &lt;code&gt;run-s build:*&lt;/code&gt;, the order of processing is the same as the order in &lt;code&gt;package.json&lt;/code&gt;, which may cause a problem if you use it in reverse.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;The above reminded us of the importance of readability, clarity, and non-overlap in the task as well.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Link
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://github.com/mysticatea/npm-run-all"&gt;npm-run-all&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.mitsue.co.jp/knowledge/blog/frontend/202004/14_1408.html"&gt;Example of package.json&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>npm</category>
      <category>node</category>
    </item>
    <item>
      <title>【Vim】Setting to automatically remove white space at the end of a line when starting and saving</title>
      <dc:creator>t-o-d</dc:creator>
      <pubDate>Mon, 05 Oct 2020 00:27:20 +0000</pubDate>
      <link>https://forem.com/kamekuremaisuke/vim-setting-to-automatically-remove-white-space-at-the-end-of-a-line-when-starting-and-saving-28b9</link>
      <guid>https://forem.com/kamekuremaisuke/vim-setting-to-automatically-remove-white-space-at-the-end-of-a-line-when-starting-and-saving-28b9</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;The following points bothered me when editing in vim and I investigated whether they could be resolved.

&lt;ul&gt;
&lt;li&gt;I have to remove it manually or by command every time because "habit or unintentional" whitespace is put at the end of a line.&lt;/li&gt;
&lt;li&gt;Sometimes I forget to delete them.&lt;/li&gt;
&lt;li&gt;In order to prevent deletion, I want to perform automatic deletion not only at the time of saving, but also at the time of starting.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;So, we'll use the autocmd function to write an automatic deletion setting.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Result
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Open &lt;code&gt;.vimrc&lt;/code&gt; (configuration file)
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;vim ~/.vimrc
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Write the following to &lt;code&gt;.vimrc&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight viml"&gt;&lt;code&gt;&lt;span class="c"&gt;" auto remove blank&lt;/span&gt;
augroup vimrc
autocmd &lt;span class="nb"&gt;BufRead&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nb"&gt;BufWrite&lt;/span&gt; * &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;!&lt;/span&gt; &amp;amp;&lt;span class="nb"&gt;bin&lt;/span&gt; &lt;span class="p"&gt;|&lt;/span&gt; &lt;span class="k"&gt;silent&lt;/span&gt;&lt;span class="p"&gt;!&lt;/span&gt; %s&lt;span class="sr"&gt;/\s\+$/&lt;/span&gt;/ge &lt;span class="p"&gt;|&lt;/span&gt; &lt;span class="k"&gt;endif&lt;/span&gt;
augroup END
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Loading settings in the vim
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight viml"&gt;&lt;code&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="k"&gt;source&lt;/span&gt; &lt;span class="p"&gt;~&lt;/span&gt;/&lt;span class="p"&gt;.&lt;/span&gt;vimrc
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;As a test, enter a blank space at the end of a line in the file, and if it is automatically deleted when the file is started or saved, it's done.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Link
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="http://vimdoc.sourceforge.net/htmldoc/autocmd.html"&gt;autocmd&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>vim</category>
      <category>vimrc</category>
      <category>linux</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Three main useful techniques to check input forms using only CSS</title>
      <dc:creator>t-o-d</dc:creator>
      <pubDate>Fri, 02 Oct 2020 12:46:56 +0000</pubDate>
      <link>https://forem.com/kamekuremaisuke/three-main-useful-techniques-to-check-input-forms-using-only-css-2bl2</link>
      <guid>https://forem.com/kamekuremaisuke/three-main-useful-techniques-to-check-input-forms-using-only-css-2bl2</guid>
      <description>&lt;h2&gt;
  
  
  Technique1 : Blank check for input form
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Using the 「placeholder-shown」 attribute
&lt;/h3&gt;

&lt;h3&gt;
  
  
  Result
&lt;/h3&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/t_o_d/embed/RwazdWv?height=600&amp;amp;default-tab=html,result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;h3&gt;
  
  
  Details
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;The attribute used in the CSS part of this input form is &lt;strong&gt;placeholder-shown&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;This indicates when a placeholder is displayed.&lt;/li&gt;
&lt;li&gt;In other words, by using 「&lt;strong&gt;not&lt;/strong&gt;」 in the following specification, &lt;strong&gt;we can make the button clickable by increasing the transparency of the button when the placeholder is not displayed&lt;/strong&gt;.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;input&lt;/span&gt; &lt;span class="na"&gt;placeholder=&lt;/span&gt;&lt;span class="s"&gt;"Please enter a value."&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;button&amp;gt;&lt;/span&gt;save&lt;span class="nt"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;





&lt;div class="highlight"&gt;&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="c"&gt;/*
Use opacity to reduce the initial transparency by half.
By using pointer-events, the initial button click is disabled.
*/&lt;/span&gt;
&lt;span class="nt"&gt;button&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;opacity&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.5&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;pointer-events&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;none&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c"&gt;/*
Using not(:placeholder-shown), you can use
If you don't see the placeholder, you can use
Automatic setting of pointer-events.
Restore the opacity's transparency as well.
*/&lt;/span&gt;
&lt;span class="nt"&gt;input&lt;/span&gt;&lt;span class="nd"&gt;:not&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="nd"&gt;:placeholder-shown&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nt"&gt;button&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;opacity&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;pointer-events&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;auto&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h2&gt;
  
  
  Technique2 : Check the format of the input form
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Using the 「valid and invalid」 attribute
&lt;/h3&gt;

&lt;h3&gt;
  
  
  Result
&lt;/h3&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/t_o_d/embed/YzqogNB?height=600&amp;amp;default-tab=html,result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;h3&gt;
  
  
  Details
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;In the CSS part of this input form, I'm using &lt;strong&gt;invalid&lt;/strong&gt; and &lt;strong&gt;valid&lt;/strong&gt; as attributes.&lt;/li&gt;
&lt;li&gt;This indicates if the form matches the type specified in the input tag's type attribute (&lt;strong&gt;valid&lt;/strong&gt;) or not (&lt;strong&gt;invalid&lt;/strong&gt;).&lt;/li&gt;
&lt;li&gt;In other words, &lt;strong&gt;the following specification will change the background color depending on whether the input value matches the format&lt;/strong&gt;.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;input&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"email"&lt;/span&gt; &lt;span class="na"&gt;placeholder=&lt;/span&gt;&lt;span class="s"&gt;"Enter email address"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;button&amp;gt;&lt;/span&gt;save&lt;span class="nt"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;





&lt;div class="highlight"&gt;&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="c"&gt;/*
Using the invalid attribute, the
The background color if the type attribute format does apply.
*/&lt;/span&gt;
&lt;span class="nt"&gt;input&lt;/span&gt;&lt;span class="nd"&gt;:invalid&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;#ee6666&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c"&gt;/*
Using the valid attribute, the
The background color if the type attribute format does not apply.
*/&lt;/span&gt;
&lt;span class="nt"&gt;input&lt;/span&gt;&lt;span class="nd"&gt;:valid&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;#95f195&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h2&gt;
  
  
  Technique3 : Check the scope of the input form
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Using the 「&lt;strong&gt;in-range and out-of-range&lt;/strong&gt;」 attribute
&lt;/h3&gt;

&lt;h3&gt;
  
  
  Result
&lt;/h3&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/t_o_d/embed/OJNeqZy?height=600&amp;amp;default-tab=html,result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;h3&gt;
  
  
  Details
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;The CSS parts of this input form use 「&lt;strong&gt;in-range&lt;/strong&gt;」 and 「&lt;strong&gt;out-of-range&lt;/strong&gt;」 attributes.&lt;/li&gt;
&lt;li&gt;This indicates if the range of values specified in the input tag's min and max attributes is met (&lt;strong&gt;in-range&lt;/strong&gt;) or not (&lt;strong&gt;out-of-range&lt;/strong&gt;).&lt;/li&gt;
&lt;li&gt;In other words, &lt;strong&gt;the following specification will mean that the background color will be changed depending on whether the input value is beyond the specified numerical range&lt;/strong&gt;.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;input&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"number"&lt;/span&gt; &lt;span class="na"&gt;min=&lt;/span&gt;&lt;span class="s"&gt;"1"&lt;/span&gt; &lt;span class="na"&gt;max=&lt;/span&gt;&lt;span class="s"&gt;"20"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;button&amp;gt;&lt;/span&gt;save&lt;span class="nt"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;





&lt;div class="highlight"&gt;&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="c"&gt;/*
Using the in-range attribute, the
The background color if it falls within a range of values.
*/&lt;/span&gt;
&lt;span class="nt"&gt;input&lt;/span&gt;&lt;span class="nd"&gt;:in-range&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;#95f195&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="c"&gt;/*
Using the out-of-range attribute, you can use the
Background color if the value does not fall within a range of values.
*/&lt;/span&gt;
&lt;span class="nt"&gt;input&lt;/span&gt;&lt;span class="nd"&gt;:out-of-range&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;#ee6666&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h2&gt;
  
  
  Link
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.w3schools.com/cssref/css_selectors.asp"&gt;css selectors&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>html</category>
      <category>css</category>
      <category>design</category>
      <category>webdev</category>
    </item>
    <item>
      <title>【Vim】Setting to make renaming a file during editing easier with a shortcut</title>
      <dc:creator>t-o-d</dc:creator>
      <pubDate>Wed, 30 Sep 2020 07:25:35 +0000</pubDate>
      <link>https://forem.com/kamekuremaisuke/vim-setting-to-make-renaming-a-file-during-editing-easier-with-a-shortcut-1p7m</link>
      <guid>https://forem.com/kamekuremaisuke/vim-setting-to-make-renaming-a-file-during-editing-easier-with-a-shortcut-1p7m</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;When I want to do file renaming even when editing vim, I was wondering if it is possible because of the following points.

&lt;ul&gt;
&lt;li&gt;I don't want to use a long command, but a shortcut using key bindings.&lt;/li&gt;
&lt;li&gt;If I forget to save a command like &lt;code&gt;:w&lt;/code&gt;, I want to save it automatically.&lt;/li&gt;
&lt;li&gt;I want to perform a process interactively.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;So, I'll write a simple setting for renaming with the Leader.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Result
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Open &lt;code&gt;.vimrc&lt;/code&gt; (configuration file)
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;vim ~/.vimrc
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Write the following to &lt;code&gt;.vimrc&lt;/code&gt;.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight viml"&gt;&lt;code&gt;&lt;span class="c"&gt;" setting leader&lt;/span&gt;
&lt;span class="c"&gt;" Use 「Space + other keys」.&lt;/span&gt;
&lt;span class="k"&gt;let&lt;/span&gt; mapleader &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;"\&amp;lt;Space&amp;gt;"&lt;/span&gt;

&lt;span class="c"&gt;" Calling a renaming function&lt;/span&gt;
&lt;span class="c"&gt;" Enables the renaming process in the vim with 「space + n」.&lt;/span&gt;
&lt;span class="nb"&gt;map&lt;/span&gt; &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;leader&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&lt;span class="k"&gt;n&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="k"&gt;call&lt;/span&gt; RenameCurrentFile&lt;span class="p"&gt;()&amp;lt;&lt;/span&gt;&lt;span class="k"&gt;cr&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;

&lt;span class="c"&gt;" Define the renaming function&lt;/span&gt;
&lt;span class="k"&gt;function&lt;/span&gt;&lt;span class="p"&gt;!&lt;/span&gt; RenameCurrentFile&lt;span class="p"&gt;()&lt;/span&gt;
  &lt;span class="k"&gt;let&lt;/span&gt; old &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;expand&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'%'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="k"&gt;let&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;input&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'NewFileName: '&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; old &lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'file'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="p"&gt;!=&lt;/span&gt; &lt;span class="s1"&gt;''&lt;/span&gt; &amp;amp;&amp;amp; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="p"&gt;!=&lt;/span&gt; old
    exec &lt;span class="s1"&gt;':saveas '&lt;/span&gt; &lt;span class="p"&gt;.&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt;
    exec &lt;span class="s1"&gt;':silent !rm '&lt;/span&gt; &lt;span class="p"&gt;.&lt;/span&gt; old
    &lt;span class="k"&gt;redraw&lt;/span&gt;&lt;span class="p"&gt;!&lt;/span&gt;
  &lt;span class="k"&gt;endif&lt;/span&gt;
&lt;span class="k"&gt;endfunction&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Loading settings in the vim
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight viml"&gt;&lt;code&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="k"&gt;source&lt;/span&gt; &lt;span class="p"&gt;~&lt;/span&gt;/&lt;span class="p"&gt;.&lt;/span&gt;vimrc
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;As a test, open the file you want to change with vim, press "spacebar + n" to change it as follows, and if it's OK, it's done.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--C9NqO9b3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/uu5avxlvwtb5enujjcos.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--C9NqO9b3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/uu5avxlvwtb5enujjcos.png" alt="test"&gt;&lt;/a&gt; &lt;/p&gt;

&lt;h2&gt;
  
  
  Link
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="http://vimdoc.sourceforge.net/htmldoc/map.html"&gt;document&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>vim</category>
      <category>vimrc</category>
      <category>linux</category>
      <category>webdev</category>
    </item>
    <item>
      <title>【Bash】Creating a secure and versatile temp directory</title>
      <dc:creator>t-o-d</dc:creator>
      <pubDate>Sat, 26 Sep 2020 12:55:28 +0000</pubDate>
      <link>https://forem.com/kamekuremaisuke/bash-creating-a-secure-and-versatile-temp-directory-50ld</link>
      <guid>https://forem.com/kamekuremaisuke/bash-creating-a-secure-and-versatile-temp-directory-50ld</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;The code for making tmp directory, which is usually used in shell, has the following points to be improved.

&lt;ul&gt;
&lt;li&gt;Because of the direct specification such as &lt;code&gt;mkdir /tmp/path&lt;/code&gt;, the names will be duplicated in some cases.&lt;/li&gt;
&lt;li&gt;Because of the direct designation, it is not secure in terms of security.&lt;/li&gt;
&lt;li&gt;The names need to be unique and also add relevance so that they are easy to use and generic within the process.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Result.
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;First, we describe the following contents in the shell file we have prepared as a result.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;#!/bin/bash&lt;/span&gt;

&lt;span class="nv"&gt;basepath&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="si"&gt;$(&lt;/span&gt;&lt;span class="nb"&gt;basename&lt;/span&gt; &lt;span class="nv"&gt;$0&lt;/span&gt;&lt;span class="si"&gt;)&lt;/span&gt;
&lt;span class="nv"&gt;timestamp&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="si"&gt;$(&lt;/span&gt;&lt;span class="nb"&gt;date&lt;/span&gt; +%Y%m%d%H%M%S&lt;span class="si"&gt;)&lt;/span&gt;
&lt;span class="nv"&gt;tmpd&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="si"&gt;$(&lt;/span&gt;&lt;span class="nb"&gt;mktemp&lt;/span&gt; &lt;span class="nt"&gt;-dt&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$basepath&lt;/span&gt;&lt;span class="s2"&gt;.&lt;/span&gt;&lt;span class="nv"&gt;$timestamp&lt;/span&gt;&lt;span class="s2"&gt;.&lt;/span&gt;&lt;span class="nv"&gt;$$&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="si"&gt;)&lt;/span&gt;/
&lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="nv"&gt;$tmpd&lt;/span&gt;

&lt;span class="c"&gt;# Outputs&lt;/span&gt;
&lt;span class="c"&gt;# $TMPDIR/index.sh.20200919152709.XXXX.XXXXX/&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;After describing it, run it multiple times to check for creation and non-overlapping of names in the output path, and you're done.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Using the mktemp command
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;You can use the &lt;strong&gt;mktemp&lt;/strong&gt; command to create a directory, it creates files and directories of size 0 automatically.

&lt;ul&gt;
&lt;li&gt;For more information on how to use mktemp, please refer to &lt;a href="https://linux.die.net/man/1/mktemp"&gt;Reference&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Use of Template Options
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;When creating with mktemp, use the t(template) option, which is specific to this command.&lt;/li&gt;
&lt;li&gt;By doing so, the directory will be created in the path set in the &lt;code&gt;$TMPDIR&lt;/code&gt; automatically without specifying the directory name.

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;※To find the configured tmp directory, use &lt;code&gt;echo $TMPDIR&lt;/code&gt;.&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;※If it is not set, it is specified directly by &lt;code&gt;-p&lt;/code&gt; or stored in &lt;code&gt;/tmp&lt;/code&gt;.&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Add related items to the name
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Add anything relevant to the name to make it easier to use when processing it in the program.&lt;/li&gt;
&lt;li&gt;At a minimum, we have added the following.

&lt;ul&gt;
&lt;li&gt;Execution path name&lt;/li&gt;
&lt;li&gt;Timestamp (time)&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  参考
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://linux.die.net/man/1/mktemp"&gt;Reference&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>linux</category>
      <category>bash</category>
      <category>mktemp</category>
      <category>shell</category>
    </item>
    <item>
      <title>npm scripts management using nps and nps-utils</title>
      <dc:creator>t-o-d</dc:creator>
      <pubDate>Sun, 16 Aug 2020 00:13:24 +0000</pubDate>
      <link>https://forem.com/kamekuremaisuke/npm-scripts-management-using-nps-and-nps-utils-80h</link>
      <guid>https://forem.com/kamekuremaisuke/npm-scripts-management-using-nps-and-nps-utils-80h</guid>
      <description>&lt;ul&gt;
&lt;li&gt;When developing with npm, the amount and content of scripts in &lt;code&gt;package.json&lt;/code&gt; may increase.&lt;/li&gt;
&lt;li&gt;Also, it may not be multi-platform, such as using commands that are not available in some environments.&lt;/li&gt;
&lt;li&gt;Therefore, I will describe how to manage scripts separately using two libraries, nps and nps-utils.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  preparation
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;As an example, we are going to change the following package.json scripts.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"scripts"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"dev"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"NODE_ENV=development nodemon index.js"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"test"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"NODE_ENV=test jest --coverage"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"lint"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"eslint . --cache"&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"NODE_ENV=production run-s build:{clean,js}"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build:clean"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"rm -rf ./dist"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build:js"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"esbuild src/index.js --bundle --outfile=dist/out.js"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"devDependencies"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="err"&gt;　　................&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"esbuild"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^0.6.12"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"nodemon"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^2.0.4"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"jest"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^26.4.0"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"eslint"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^7.7.0"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"npm-run-all"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^4.1.5"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;This package.json has the following concerns

&lt;ul&gt;
&lt;li&gt;The rm command and environment variable settings are limited to the execution environment.&lt;/li&gt;
&lt;li&gt;There is a lot of content and volume, and it will become more complex as it increases in the future.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  setting
&lt;/h2&gt;

&lt;h3&gt;
  
  
  install
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Install the following two libraries

&lt;ul&gt;
&lt;li&gt;nps : npm scripts management tool

&lt;ul&gt;
&lt;li&gt;By keeping the details of scripts in a separate file, management and maintenance will be easier.&lt;/li&gt;
&lt;li&gt;It is highly flexible and extensible because it can be written in js and yaml instead of json.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;nps-utils : Packaged tools to enhance nps

&lt;ul&gt;
&lt;li&gt;A number of multi-platform libraries are built into the system, making it complete in one.
&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;--save-dev&lt;/span&gt; nps nps-utils
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h3&gt;
  
  
  init
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Create a configuration file with the following command.

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;※This time, we'll create it in js.&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# The default is package-scripts.js&lt;/span&gt;
./node_modules/.bin/nps init

&lt;span class="c"&gt;# If you create with yaml.&lt;/span&gt;
./node_modules/.bin/nps init &lt;span class="nt"&gt;--type&lt;/span&gt; yml
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;After creation, the structure is as follows.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.
├── package.json
└── package-scripts.js
└── .......
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h3&gt;
  
  
  Example of a configuration template
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;First, make the following contents of &lt;code&gt;package-scripts.js&lt;/code&gt;created in the initialization process.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Multiplatform support(Mac,Windows,Linux)&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;series&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;  &lt;span class="c1"&gt;// Simplification of continuous execution&lt;/span&gt;
  &lt;span class="nx"&gt;rimraf&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;  &lt;span class="c1"&gt;// rm command&lt;/span&gt;
  &lt;span class="nx"&gt;crossEnv&lt;/span&gt;  &lt;span class="c1"&gt;// Environment variable setting&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;nps-utils&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;scripts&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;dev&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;default&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;crossEnv&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;NODE_ENV=development nodemon index.js&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="na"&gt;test&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;default&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;crossEnv&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;NODE_ENV=test jest --coverage&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="na"&gt;lint&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;default&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;eslint . --cache&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="na"&gt;build&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;default&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;crossEnv&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="s2"&gt;`NODE_ENV=production &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;series&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;nps&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
          &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;build.clean&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;build.js&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="p"&gt;)}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="p"&gt;),&lt;/span&gt;
      &lt;span class="na"&gt;clean&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;rimraf&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;dist&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
      &lt;span class="na"&gt;js&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;esbuild src/index.ts --bundle --outfile=dist/out.js&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;The content of the final &lt;code&gt;package.json&lt;/code&gt; is as follows.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"scripts"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"dev"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"nps dev"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"test"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"nps test"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"lint"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"nps lint"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"nps build"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"devDependencies"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="err"&gt;　　................&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"esbuild"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^0.6.12"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"nodemon"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^2.0.4"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"jest"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^26.4.0"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"eslint"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^7.7.0"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"npm-run-all"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^4.1.5"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"nps"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^5.10.0"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"nps-utils"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^1.7.0"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="err"&gt;..........&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h3&gt;
  
  
  run
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Each script is executed with the following command.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# npm run script name&lt;/span&gt;

&lt;span class="c"&gt;# dev&lt;/span&gt;
npm run dev
&lt;span class="c"&gt;# test&lt;/span&gt;
npm run &lt;span class="nb"&gt;test&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h2&gt;
  
  
  Link
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://github.com/sezna/nps"&gt;nps Github&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/kentcdodds/nps-utils"&gt;nps-utils Github&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>node</category>
      <category>nps</category>
      <category>npsutils</category>
      <category>javascript</category>
    </item>
    <item>
      <title>【NPM】Three useful ways to write a grouping in scripts configuration.</title>
      <dc:creator>t-o-d</dc:creator>
      <pubDate>Mon, 10 Aug 2020 09:13:47 +0000</pubDate>
      <link>https://forem.com/kamekuremaisuke/npm-three-useful-ways-to-write-a-grouping-in-scripts-configuration-17if</link>
      <guid>https://forem.com/kamekuremaisuke/npm-three-useful-ways-to-write-a-grouping-in-scripts-configuration-17if</guid>
      <description>&lt;ul&gt;
&lt;li&gt;I think you need to write scripts configuration in package.json when you use npm.
In this post, I'll write three useful ways to group scripts.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  preparation
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Install &lt;code&gt;npm-run-all&lt;/code&gt;, which is useful when writing multiple commands in scripts.

&lt;ul&gt;
&lt;li&gt;It can be written as &lt;code&gt;run-s ******(scripts name)&lt;/code&gt;.
&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ npm i -D npm-run-all
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h2&gt;
  
  
  1. Basic Writing
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Write all of the scripts.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"scripts"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"run-s build:clean build:copy build:js"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build:clean"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"rimraf ./dist"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build:copy"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"cpx -C public/** dist"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build:js"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"esbuild src/index.js --bundle --outfile=dist/out.js"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h2&gt;
  
  
  2. wildcard writing
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Write with a wildcard using an asterisk.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"scripts"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"run-s build:*"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build:clean"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"rimraf ./dist"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build:copy"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"cpx -C public/** dist"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build:js"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"esbuild src/index.js --bundle --outfile=dist/out.js"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h2&gt;
  
  
  3. grouping writing (&lt;strong&gt;Convenient and recommended&lt;/strong&gt;)
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Write it as you would an array using brackets.&lt;/li&gt;
&lt;li&gt;It is recommended that the order and names are clearly marked.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"scripts"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"run-s build:{clean,copy,js}"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build:clean"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"rimraf ./dist"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build:copy"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"cpx -C public/** dist"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build:js"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"esbuild src/index.js --bundle --outfile=dist/out.js"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;That's all.&lt;br&gt;
Thank you for reading.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>npm</category>
    </item>
  </channel>
</rss>
