<?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: Rehan Qadir</title>
    <description>The latest articles on Forem by Rehan Qadir (@drraq).</description>
    <link>https://forem.com/drraq</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%2F385664%2F2586296f-a2fa-48f3-b706-889171c2d520.png</url>
      <title>Forem: Rehan Qadir</title>
      <link>https://forem.com/drraq</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/drraq"/>
    <language>en</language>
    <item>
      <title>SEQ &amp; PASTE: An effective way to add sequential numbers to the beginning of a file in bash</title>
      <dc:creator>Rehan Qadir</dc:creator>
      <pubDate>Tue, 26 May 2020 14:28:16 +0000</pubDate>
      <link>https://forem.com/drraq/seq-paste-an-effective-way-to-add-sequential-numbers-to-the-beginning-of-a-file-in-bash-2fbk</link>
      <guid>https://forem.com/drraq/seq-paste-an-effective-way-to-add-sequential-numbers-to-the-beginning-of-a-file-in-bash-2fbk</guid>
      <description>&lt;p&gt;Recently I explored &lt;code&gt;seq&lt;/code&gt; and &lt;code&gt;paste&lt;/code&gt; Linux commands and I was amazed how effectively we can accomplish our desired target of adding a sequential numbers to the beginning of a file without using any &lt;code&gt;for&lt;/code&gt; loop or manipulating the data file line by line.&lt;/p&gt;

&lt;p&gt;Lets dive in to see how we can leverage these two commands.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;seq [n]&lt;/code&gt; generates sequential numbers starting from &lt;strong&gt;1&lt;/strong&gt; to &lt;strong&gt;n&lt;/strong&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;seq &lt;/span&gt;10
&lt;span class="c"&gt;# Output&lt;/span&gt;
&lt;span class="c"&gt;# 1&lt;/span&gt;
&lt;span class="c"&gt;# 2&lt;/span&gt;
&lt;span class="c"&gt;# 3&lt;/span&gt;
&lt;span class="c"&gt;# 4&lt;/span&gt;
&lt;span class="c"&gt;# 5&lt;/span&gt;
&lt;span class="c"&gt;# 6&lt;/span&gt;
&lt;span class="c"&gt;# 7&lt;/span&gt;
&lt;span class="c"&gt;# 8&lt;/span&gt;
&lt;span class="c"&gt;# 9&lt;/span&gt;
&lt;span class="c"&gt;# 10&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We can redirect the output of the command to a file, say, &lt;code&gt;serial&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;seq &lt;/span&gt;1024 &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; serial

&lt;span class="nb"&gt;wc&lt;/span&gt; &lt;span class="nt"&gt;-l&lt;/span&gt; serial
&lt;span class="c"&gt;# Output&lt;/span&gt;
&lt;span class="c"&gt;# 1024 serial&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The second command we are going to explore is &lt;code&gt;paste&lt;/code&gt;. The command uses two or more files to produce an output separated by &lt;code&gt;whitespace&lt;/code&gt; in columns.&lt;/p&gt;

&lt;p&gt;Lets say we have a &lt;code&gt;cities&lt;/code&gt; file with names of different cities in it&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Prague
Montreal
Amsterdam
Rome
Barcelona
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;and a &lt;code&gt;serial&lt;/code&gt; file with the following numbers&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1
2
3
4
5
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Lets use &lt;code&gt;paste&lt;/code&gt; command on &lt;code&gt;serial&lt;/code&gt; and &lt;code&gt;cities&lt;/code&gt; files.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;paste serial cities
# Output
# 1 Prague
# 2 Montreal
# 3 Amsterdam
# 4 Rome
# 5 Barcelona
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As we can see the output is separated by a &lt;code&gt;whitespace&lt;/code&gt;. We will see how we can modify the delimiter shortly.&lt;/p&gt;

&lt;h3&gt;
  
  
  Wind things up
&lt;/h3&gt;

&lt;p&gt;Lets put 2 commands together to accomplish our target.&lt;/p&gt;

&lt;p&gt;Suppose we have a CSV file &lt;code&gt;mock.csv&lt;/code&gt; with the following content&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Ryder,eget.metus.In@congueturpis.com,El Quisco
Keelie,vel.faucibus.id@libero.net,Temuka
Hamilton,enim.non.nisi@Maecenas.co.uk,Leeds
Lani,neque.sed.dictum@et.net,Largs
Gloria,montes.nascetur@nisl.co.uk,Vejalpur
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;and we wish to add sequential numbers to the beginning of the file. Here is the final bash script.&lt;br&gt;
&lt;/p&gt;

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

&lt;span class="c"&gt;# Generate sequence of numbers (1 to 5)&lt;/span&gt;
&lt;span class="nb"&gt;seq &lt;/span&gt;5 &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; serial

&lt;span class="c"&gt;# Use paste to combine two files with comma as a delimiter&lt;/span&gt;
&lt;span class="nb"&gt;paste&lt;/span&gt; &lt;span class="nt"&gt;-d&lt;/span&gt;, serial mock.csv &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; data.csv

&lt;span class="nb"&gt;cat &lt;/span&gt;data.csv
&lt;span class="c"&gt;# Output&lt;/span&gt;
&lt;span class="c"&gt;# 1,Ryder,eget.metus.In@congueturpis.com,El Quisco&lt;/span&gt;
&lt;span class="c"&gt;# 2,Keelie,vel.faucibus.id@libero.net,Temuka&lt;/span&gt;
&lt;span class="c"&gt;# 3,Hamilton,enim.non.nisi@Maecenas.co.uk,Leeds&lt;/span&gt;
&lt;span class="c"&gt;# 4,Lani,neque.sed.dictum@et.net,Largs&lt;/span&gt;
&lt;span class="c"&gt;# 5,Gloria,montes.nascetur@nisl.co.uk,Vejalpur&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Viola!!! That was simple and elegant. Note that we have used &lt;code&gt;-d,&lt;/code&gt; option with &lt;code&gt;paste&lt;/code&gt; to indicate the delimiter to be &lt;code&gt;,&lt;/code&gt; rather than a &lt;code&gt;whitespace&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Note that we have hard coded &lt;code&gt;5&lt;/code&gt; as an argument to &lt;code&gt;seq&lt;/code&gt; command because we know beforehand that &lt;code&gt;mock.csv&lt;/code&gt; contains &lt;code&gt;5&lt;/code&gt; rows. What if we don't know the number of rows in the CSV file? Simply use &lt;code&gt;wc -l&lt;/code&gt; command and extract the number of lines using &lt;code&gt;awk&lt;/code&gt; or &lt;code&gt;cut&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;LINES&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="si"&gt;$(&lt;/span&gt;&lt;span class="nb"&gt;wc&lt;/span&gt; &lt;span class="nt"&gt;-l&lt;/span&gt; mock.csv | &lt;span class="nb"&gt;awk&lt;/span&gt; &lt;span class="s1"&gt;' {print $1} '&lt;/span&gt;&lt;span class="si"&gt;)&lt;/span&gt;
&lt;span class="c"&gt;# LINES=$(wc -l mock.csv | cut -d ' ' -f1)&lt;/span&gt;

&lt;span class="c"&gt;# Use LINES variable as an argument to seq command&lt;/span&gt;
&lt;span class="nb"&gt;seq&lt;/span&gt; &lt;span class="nv"&gt;$LINES&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That's  it.&lt;/p&gt;




&lt;p&gt;I hope it will help you. Keep Coding!&lt;/p&gt;

</description>
      <category>bash</category>
      <category>sequence</category>
      <category>linux</category>
    </item>
    <item>
      <title>Bash: All you need to know to work with bash arrays</title>
      <dc:creator>Rehan Qadir</dc:creator>
      <pubDate>Fri, 15 May 2020 23:01:09 +0000</pubDate>
      <link>https://forem.com/drraq/bash-all-you-need-to-know-to-work-with-bash-arrays-3fna</link>
      <guid>https://forem.com/drraq/bash-all-you-need-to-know-to-work-with-bash-arrays-3fna</guid>
      <description>&lt;h1&gt;
  
  
  Indexed Arrays
&lt;/h1&gt;

&lt;p&gt;We start with simple indexed arrays in bash. You can define an indexed array by using parentheses and assignment operator. Lets say you wish to store names of months in &lt;code&gt;months&lt;/code&gt; variable as an array. Here is how you will do it in bash.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;months&lt;/span&gt;&lt;span class="o"&gt;=(&lt;/span&gt;&lt;span class="s2"&gt;"Jan"&lt;/span&gt; &lt;span class="s2"&gt;"Feb"&lt;/span&gt; &lt;span class="s2"&gt;"Mar"&lt;/span&gt; &lt;span class="s2"&gt;"Apr"&lt;/span&gt; &lt;span class="s2"&gt;"May"&lt;/span&gt; &lt;span class="s2"&gt;"Jun"&lt;/span&gt; &lt;span class="s2"&gt;"Jul"&lt;/span&gt; &lt;span class="s2"&gt;"Aug"&lt;/span&gt; &lt;span class="s2"&gt;"Sep"&lt;/span&gt; &lt;span class="s2"&gt;"Oct"&lt;/span&gt; &lt;span class="s2"&gt;"Nov"&lt;/span&gt; &lt;span class="s2"&gt;"Dec"&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Bash arrays start with the index &lt;code&gt;0&lt;/code&gt; so to retrieve the value for &lt;em&gt;October&lt;/em&gt; we will use index &lt;code&gt;9&lt;/code&gt;, as in the following code.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;months&lt;/span&gt;&lt;span class="o"&gt;=(&lt;/span&gt;&lt;span class="s2"&gt;"Jan"&lt;/span&gt; &lt;span class="s2"&gt;"Feb"&lt;/span&gt; &lt;span class="s2"&gt;"Mar"&lt;/span&gt; &lt;span class="s2"&gt;"Apr"&lt;/span&gt; &lt;span class="s2"&gt;"May"&lt;/span&gt; &lt;span class="s2"&gt;"Jun"&lt;/span&gt; &lt;span class="s2"&gt;"Jul"&lt;/span&gt; &lt;span class="s2"&gt;"Aug"&lt;/span&gt; &lt;span class="s2"&gt;"Sep"&lt;/span&gt; &lt;span class="s2"&gt;"Oct"&lt;/span&gt; &lt;span class="s2"&gt;"Nov"&lt;/span&gt; &lt;span class="s2"&gt;"Dec"&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt;

&lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;months&lt;/span&gt;&lt;span class="p"&gt;[9]&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;
&lt;span class="c"&gt;# Output: Oct&lt;/span&gt;

&lt;span class="nv"&gt;index&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;5

&lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;months&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nv"&gt;$index&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;
&lt;span class="c"&gt;#Output: Jun&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Make sure to use curly braces when accessing an element through index.&lt;/p&gt;

&lt;p&gt;Bash allow use of special characters to get all values and indexes of an array at once. Use &lt;code&gt;*&lt;/code&gt; or &lt;code&gt;@&lt;/code&gt; to get all values stored in an array and &lt;code&gt;!&lt;/code&gt; before array name to get all indexes. And to get length of an array use &lt;code&gt;#&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;months&lt;/span&gt;&lt;span class="o"&gt;=(&lt;/span&gt;&lt;span class="s2"&gt;"Jan"&lt;/span&gt; &lt;span class="s2"&gt;"Feb"&lt;/span&gt; &lt;span class="s2"&gt;"Mar"&lt;/span&gt; &lt;span class="s2"&gt;"Apr"&lt;/span&gt; &lt;span class="s2"&gt;"May"&lt;/span&gt; &lt;span class="s2"&gt;"Jun"&lt;/span&gt; &lt;span class="s2"&gt;"Jul"&lt;/span&gt; &lt;span class="s2"&gt;"Aug"&lt;/span&gt; &lt;span class="s2"&gt;"Sep"&lt;/span&gt; &lt;span class="s2"&gt;"Oct"&lt;/span&gt; &lt;span class="s2"&gt;"Nov"&lt;/span&gt; &lt;span class="s2"&gt;"Dec"&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt;

&lt;span class="c"&gt;# Get all values from months array&lt;/span&gt;
&lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;months&lt;/span&gt;&lt;span class="p"&gt;[*]&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;
&lt;span class="c"&gt;# or echo ${months[@]}&lt;/span&gt;
&lt;span class="c"&gt;# Output: Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec&lt;/span&gt;

&lt;span class="c"&gt;# Get all indexes&lt;/span&gt;
&lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="p"&gt;!months[@]&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;
&lt;span class="c"&gt;# or echo ${!months[*]}&lt;/span&gt;
&lt;span class="c"&gt;# Output: 0 1 2 3 4 5 6 7 8 9 10 11&lt;/span&gt;

&lt;span class="c"&gt;# Length of array&lt;/span&gt;
&lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="k"&gt;${#&lt;/span&gt;&lt;span class="nv"&gt;months&lt;/span&gt;&lt;span class="p"&gt;[@]&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;
&lt;span class="c"&gt;# or echo ${#months[*]}&lt;/span&gt;
&lt;span class="c"&gt;# Output: 12&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You can easily append data to an existing indexed array using &lt;code&gt;+=&lt;/code&gt; operator or you can specify the index by your own.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;months&lt;/span&gt;&lt;span class="o"&gt;=(&lt;/span&gt;&lt;span class="s2"&gt;"Jan"&lt;/span&gt; &lt;span class="s2"&gt;"Feb"&lt;/span&gt; &lt;span class="s2"&gt;"Mar"&lt;/span&gt; &lt;span class="s2"&gt;"Apr"&lt;/span&gt; &lt;span class="s2"&gt;"May"&lt;/span&gt; &lt;span class="s2"&gt;"Jun"&lt;/span&gt; &lt;span class="s2"&gt;"Jul"&lt;/span&gt; &lt;span class="s2"&gt;"Aug"&lt;/span&gt; &lt;span class="s2"&gt;"Sep"&lt;/span&gt; &lt;span class="s2"&gt;"Oct"&lt;/span&gt; &lt;span class="s2"&gt;"Nov"&lt;/span&gt; &lt;span class="s2"&gt;"Dec"&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt;

&lt;span class="c"&gt;# Add to the months array&lt;/span&gt;
months+&lt;span class="o"&gt;=(&lt;/span&gt;&lt;span class="s2"&gt;"Raj"&lt;/span&gt; &lt;span class="s2"&gt;"Sha"&lt;/span&gt; &lt;span class="s2"&gt;"Ra1"&lt;/span&gt; &lt;span class="s2"&gt;"Ra2"&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt;

&lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;months&lt;/span&gt;&lt;span class="p"&gt;[@]&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;
&lt;span class="c"&gt;# Output: Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec Raj Sha Ra1 Ra2&lt;/span&gt;

&lt;span class="c"&gt;# Add element to any specified index&lt;/span&gt;
months[20]&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"Muh"&lt;/span&gt;
&lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;months&lt;/span&gt;&lt;span class="p"&gt;[@]&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;
&lt;span class="c"&gt;# Output: Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec Raj Sha Ra1 Ra2 Muh&lt;/span&gt;

&lt;span class="c"&gt;# Get all indexes&lt;/span&gt;
&lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="p"&gt;!months[@]&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;
&lt;span class="c"&gt;# Output: 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 20&lt;/span&gt;

&lt;span class="c"&gt;# Initialize second array&lt;/span&gt;
&lt;span class="nv"&gt;animals&lt;/span&gt;&lt;span class="o"&gt;=(&lt;/span&gt;&lt;span class="s2"&gt;"Cow"&lt;/span&gt; &lt;span class="s2"&gt;"Goat"&lt;/span&gt; &lt;span class="s2"&gt;"Horse"&lt;/span&gt; &lt;span class="s2"&gt;"Lion"&lt;/span&gt; &lt;span class="o"&gt;[&lt;/span&gt;11]&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"Brock Lesnar"&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt;

&lt;span class="c"&gt;# Get all indexes for animals&lt;/span&gt;
&lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="p"&gt;!animals[@]&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;
&lt;span class="c"&gt;# Output: 0 1 2 3 11&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Notice that you can specify an index out of order as well and bash will take care of it. As it can be seen that we have added &lt;code&gt;Muh&lt;/code&gt; at the &lt;code&gt;20th&lt;/code&gt; index and it worked just fine. Also, while initiating &lt;code&gt;animals&lt;/code&gt; array we changed the indexing deliberately and it also worked without any error.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Keep note that negative indexes are not allowed.&lt;/em&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Associative Arrays or Hashes
&lt;/h1&gt;

&lt;p&gt;Bash also supports hashes that is storing data as &lt;code&gt;key =&amp;gt; value&lt;/code&gt; pair. You can all it &lt;strong&gt;associative array&lt;/strong&gt; if you are coming from &lt;code&gt;PHP&lt;/code&gt; background or &lt;strong&gt;dictionary&lt;/strong&gt; in &lt;code&gt;Python&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;We can declare a variable to be an associative array by using &lt;code&gt;declare -A &amp;lt;variable name&amp;gt;&lt;/code&gt; command. We can also initialize it using parentheses at the time of declaration.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;declare&lt;/span&gt; &lt;span class="nt"&gt;-A&lt;/span&gt; &lt;span class="nv"&gt;stars&lt;/span&gt;&lt;span class="o"&gt;=([&lt;/span&gt;ALP]&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"Cow"&lt;/span&gt; &lt;span class="o"&gt;[&lt;/span&gt;BET]&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"Bow"&lt;/span&gt; &lt;span class="o"&gt;[&lt;/span&gt;GAM]&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"Goat"&lt;/span&gt; &lt;span class="o"&gt;[&lt;/span&gt;DEL]&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"Scorpion"&lt;/span&gt;
&lt;span class="o"&gt;[&lt;/span&gt;EPS]&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"Balance"&lt;/span&gt; &lt;span class="o"&gt;[&lt;/span&gt;ZET]&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"Queen"&lt;/span&gt; &lt;span class="o"&gt;[&lt;/span&gt;ETA]&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"Lion"&lt;/span&gt; &lt;span class="o"&gt;[&lt;/span&gt;THE]&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"Fish"&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt;

&lt;span class="c"&gt;# OR&lt;/span&gt;
&lt;span class="nb"&gt;declare&lt;/span&gt; &lt;span class="nt"&gt;-A&lt;/span&gt; planets
planets[&lt;span class="s2"&gt;"first"&lt;/span&gt;&lt;span class="o"&gt;]=&lt;/span&gt;&lt;span class="s2"&gt;"Mercury"&lt;/span&gt;
planets[&lt;span class="s2"&gt;"second"&lt;/span&gt;&lt;span class="o"&gt;]=&lt;/span&gt;&lt;span class="s2"&gt;"Venus"&lt;/span&gt;
planets[&lt;span class="s2"&gt;"third"&lt;/span&gt;&lt;span class="o"&gt;]=&lt;/span&gt;&lt;span class="s2"&gt;"Earth"&lt;/span&gt;
planets[&lt;span class="s2"&gt;"Musk adventure"&lt;/span&gt;&lt;span class="o"&gt;]=&lt;/span&gt;&lt;span class="s2"&gt;"Mars"&lt;/span&gt;
planets[&lt;span class="s2"&gt;"second last"&lt;/span&gt;&lt;span class="o"&gt;]=&lt;/span&gt;&lt;span class="s2"&gt;"Uranus"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We can access the keys and values of an associative array in a similar fashion as of indexed arrays.&lt;/p&gt;

&lt;p&gt;We will print the &lt;strong&gt;key value&lt;/strong&gt; pairs of an associative array using for loop to conclude this topic.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;declare&lt;/span&gt; &lt;span class="nt"&gt;-A&lt;/span&gt; &lt;span class="nv"&gt;stars&lt;/span&gt;&lt;span class="o"&gt;=([&lt;/span&gt;ALP]&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"Cow"&lt;/span&gt; &lt;span class="o"&gt;[&lt;/span&gt;BET]&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"Bow"&lt;/span&gt; &lt;span class="o"&gt;[&lt;/span&gt;GAM]&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"Goat"&lt;/span&gt; &lt;span class="o"&gt;[&lt;/span&gt;DEL]&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"Scorpion"&lt;/span&gt;
&lt;span class="o"&gt;[&lt;/span&gt;EPS]&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"Balance"&lt;/span&gt; &lt;span class="o"&gt;[&lt;/span&gt;ZET]&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"Queen"&lt;/span&gt; &lt;span class="o"&gt;[&lt;/span&gt;ETA]&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"Lion"&lt;/span&gt; &lt;span class="o"&gt;[&lt;/span&gt;THE]&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"Fish"&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt;

&lt;span class="k"&gt;for &lt;/span&gt;key &lt;span class="k"&gt;in&lt;/span&gt; &lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="p"&gt;!stars[@]&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="k"&gt;do
    &lt;/span&gt;&lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$key&lt;/span&gt;&lt;span class="s2"&gt; =&amp;gt; &lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;stars&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nv"&gt;$key&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="k"&gt;done&lt;/span&gt;

&lt;span class="c"&gt;# Output&lt;/span&gt;
&lt;span class="c"&gt;# GAM =&amp;gt; Goat&lt;/span&gt;
&lt;span class="c"&gt;# EPS =&amp;gt; Balance&lt;/span&gt;
&lt;span class="c"&gt;# ALP =&amp;gt; Cow&lt;/span&gt;
&lt;span class="c"&gt;# ZET =&amp;gt; Queen&lt;/span&gt;
&lt;span class="c"&gt;# DEL =&amp;gt; Scorpion&lt;/span&gt;
&lt;span class="c"&gt;# BET =&amp;gt; Bow&lt;/span&gt;
&lt;span class="c"&gt;# ETA =&amp;gt; Lion&lt;/span&gt;
&lt;span class="c"&gt;# THE =&amp;gt; Fish&lt;/span&gt;

&lt;span class="c"&gt;# Get length of stars&lt;/span&gt;
&lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="k"&gt;${#&lt;/span&gt;&lt;span class="nv"&gt;start&lt;/span&gt;&lt;span class="p"&gt;[@]&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;
&lt;span class="c"&gt;# Output: 8&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That's it for Arrays in bash from my side.&lt;/p&gt;




&lt;p&gt;I hope it will help you. Keep Coding!&lt;/p&gt;

</description>
      <category>bash</category>
      <category>arrays</category>
      <category>shell</category>
      <category>linux</category>
    </item>
    <item>
      <title>Bash: Some useful tricks with date command</title>
      <dc:creator>Rehan Qadir</dc:creator>
      <pubDate>Thu, 14 May 2020 12:23:59 +0000</pubDate>
      <link>https://forem.com/drraq/bash-some-useful-tricks-with-date-command-2l5b</link>
      <guid>https://forem.com/drraq/bash-some-useful-tricks-with-date-command-2l5b</guid>
      <description>&lt;h3&gt;
  
  
  &lt;strong&gt;Lets get started&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Just typing &lt;code&gt;date&lt;/code&gt; will print the date and time on the standard output. Following are some useful options with the &lt;code&gt;date&lt;/code&gt; command.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Seconds since UNIX epoch (01/01/1970)&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Use &lt;code&gt;%s&lt;/code&gt; to get number of &lt;em&gt;seconds&lt;/em&gt; passed since UNIX epoch. Creating unique file names is one of the possible use case.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# + is use for formatting&lt;/span&gt;
&lt;span class="nb"&gt;date&lt;/span&gt; +%s
&lt;span class="c"&gt;# Output: 1589455968&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Number of days since the year's beginning&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Use &lt;code&gt;%j&lt;/code&gt; to get the number of days passed since the beginning of the year.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# + is use for formatting&lt;/span&gt;
&lt;span class="nb"&gt;date&lt;/span&gt; +%j
&lt;span class="c"&gt;# Output: 135&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Dates in the past or future&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Use &lt;code&gt;-d&lt;/code&gt; or &lt;code&gt;--date&lt;/code&gt; option to get any date in the past or future.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# + is use for formatting&lt;/span&gt;
&lt;span class="nb"&gt;date&lt;/span&gt; +%F &lt;span class="nt"&gt;-d&lt;/span&gt; &lt;span class="s2"&gt;"1 day ago"&lt;/span&gt;
&lt;span class="c"&gt;# Output: 2020-05-13&lt;/span&gt;

&lt;span class="c"&gt;# More easily by using - sign&lt;/span&gt;
&lt;span class="nb"&gt;date&lt;/span&gt; +%F &lt;span class="nt"&gt;-d&lt;/span&gt; &lt;span class="s2"&gt;"-1 day"&lt;/span&gt;
&lt;span class="c"&gt;# Output: 2020-05-13&lt;/span&gt;

&lt;span class="nb"&gt;date&lt;/span&gt; +&lt;span class="s2"&gt;"%D %T"&lt;/span&gt; &lt;span class="nt"&gt;-d&lt;/span&gt; &lt;span class="s2"&gt;"1 year ago"&lt;/span&gt;
&lt;span class="c"&gt;# Output: 05/14/19 16:54:02&lt;/span&gt;

&lt;span class="nb"&gt;date&lt;/span&gt; +&lt;span class="s2"&gt;"%F"&lt;/span&gt; &lt;span class="nt"&gt;--date&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"1 month ago"&lt;/span&gt;
&lt;span class="c"&gt;# Output: 2020-04-14&lt;/span&gt;

&lt;span class="c"&gt;# For dates in future use + sign before number&lt;/span&gt;
&lt;span class="nb"&gt;date&lt;/span&gt; +%F &lt;span class="nt"&gt;-d&lt;/span&gt; &lt;span class="s2"&gt;"+1 day"&lt;/span&gt;
&lt;span class="c"&gt;# Output: 2020-05-15&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Get Time Zone&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Use &lt;code&gt;%Z&lt;/code&gt; option to get your time zone&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# + is use for formatting&lt;/span&gt;
&lt;span class="nb"&gt;date&lt;/span&gt; +%Z
&lt;span class="c"&gt;# Output: PKT&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Get date from UNIX epoch&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;To extract date from the number of seconds passed since UNIX epoch, use &lt;code&gt;-d&lt;/code&gt; with &lt;code&gt;@&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;date&lt;/span&gt; &lt;span class="nt"&gt;-d&lt;/span&gt; @1500000000
&lt;span class="c"&gt;# Output: Fri 14 Jul 07:40:00 PKT 2017&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Get date in ISO Format&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Use &lt;code&gt;-Iseconds&lt;/code&gt; option to get current date in ISO Format.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;date&lt;/span&gt; &lt;span class="nt"&gt;-Iseconds&lt;/span&gt;
&lt;span class="c"&gt;# Output: 2020-05-14T17:18:22+05:00&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Get the last day of the previous month&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;While executing an SQL command to retrieve data for the starting and ending date of the previous month, it is always a point of concern to correctly determine whether the previous month was of 30 or 31 days. To resolve this issue, we can use &lt;code&gt;date&lt;/code&gt; in the option argument of &lt;code&gt;date&lt;/code&gt; command with &lt;code&gt;%d&lt;/code&gt; option to get the current day of the month.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# + is use for formatting&lt;/span&gt;
&lt;span class="c"&gt;# %d is used to get the day of the month&lt;/span&gt;

&lt;span class="nb"&gt;date&lt;/span&gt; +%F &lt;span class="nt"&gt;-d&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="si"&gt;$(&lt;/span&gt;&lt;span class="nb"&gt;date&lt;/span&gt; +%d&lt;span class="si"&gt;)&lt;/span&gt;&lt;span class="s2"&gt; days ago"&lt;/span&gt;
&lt;span class="c"&gt;# Output: 2020-04-30&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;p&gt;I hope it will help you. Keep coding!&lt;/p&gt;

&lt;p&gt;P.S. I will keep on adding to this post with time.&lt;/p&gt;

</description>
      <category>bash</category>
      <category>shell</category>
      <category>linux</category>
      <category>date</category>
    </item>
    <item>
      <title>Nuxt: How to use nuxt-link-active and nuxt-link-exact-active classes with nuxt-link? </title>
      <dc:creator>Rehan Qadir</dc:creator>
      <pubDate>Wed, 13 May 2020 20:06:43 +0000</pubDate>
      <link>https://forem.com/drraq/nuxt-how-to-use-nuxt-link-active-and-nuxt-link-exact-active-classes-with-nuxt-link-3cpp</link>
      <guid>https://forem.com/drraq/nuxt-how-to-use-nuxt-link-active-and-nuxt-link-exact-active-classes-with-nuxt-link-3cpp</guid>
      <description>&lt;h4&gt;
  
  
  Problem
&lt;/h4&gt;

&lt;blockquote&gt;
&lt;p&gt;Apply custom active class to active route in &lt;code&gt;nuxt-link&lt;/code&gt; tag including all nested routes&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Let's say you wish to apply custom active class to an active route in &lt;code&gt;nuxt-link&lt;/code&gt; tag.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;...
&lt;span class="nt"&gt;&amp;lt;nav&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;nuxt-link&lt;/span&gt; &lt;span class="na"&gt;to=&lt;/span&gt;&lt;span class="s"&gt;"/"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Home&lt;span class="nt"&gt;&amp;lt;/nuxt-link&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;nuxt-link&lt;/span&gt; &lt;span class="na"&gt;to=&lt;/span&gt;&lt;span class="s"&gt;"/explore"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Explore&lt;span class="nt"&gt;&amp;lt;/nuxt-link&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;nuxt-link&lt;/span&gt; &lt;span class="na"&gt;to=&lt;/span&gt;&lt;span class="s"&gt;"/about"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;About&lt;span class="nt"&gt;&amp;lt;/nuxt-link&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/nav&amp;gt;&lt;/span&gt;
...
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The first choice is to use &lt;code&gt;nuxt-link-active&lt;/code&gt; class to style the active route.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nc"&gt;.nuxt-link-active&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;font-weight&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;bold&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;h5&gt;
  
  
  Discrepancy
&lt;/h5&gt;

&lt;p&gt;If user navigates to &lt;code&gt;/explore&lt;/code&gt; or &lt;code&gt;/about&lt;/code&gt; route, the styling will get applied to &lt;code&gt;/&lt;/code&gt; route as well which in practice is not desired.&lt;/p&gt;

&lt;p&gt;Well, to resolve this issue one is prompted to use &lt;code&gt;nuxt-link-exact-active&lt;/code&gt; along similar lines.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nc"&gt;.nuxt-link-exact-active&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;font-weight&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;bold&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;p&gt;Apparently this approach resolves the issue very well. But hold on, what if there are some nested routes? What about &lt;code&gt;/explore/express&lt;/code&gt; or &lt;code&gt;/explore/ruby-on-rails&lt;/code&gt;?&lt;/p&gt;

&lt;p&gt;In practice if user navigates to any of the nested routes &lt;code&gt;/explore&lt;/code&gt; should continue to have the styling, right? but with just &lt;code&gt;nuxt-link-exact-link&lt;/code&gt; class in hand it will fail to persist.&lt;/p&gt;

&lt;h4&gt;
  
  
  Solution
&lt;/h4&gt;

&lt;p&gt;To get the best of both worlds, use &lt;code&gt;nuxt-link-active&lt;/code&gt; class along with &lt;code&gt;exact&lt;/code&gt; keyword in &lt;code&gt;nuxt-link&lt;/code&gt; tag.&lt;/p&gt;

&lt;p&gt;Use &lt;code&gt;exact&lt;/code&gt; in the &lt;code&gt;nuxt-link&lt;/code&gt; tag&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;...
&lt;span class="nt"&gt;&amp;lt;nav&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;nuxt-link&lt;/span&gt; &lt;span class="na"&gt;to=&lt;/span&gt;&lt;span class="s"&gt;"/"&lt;/span&gt; &lt;span class="na"&gt;exact&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Home&lt;span class="nt"&gt;&amp;lt;/nuxt-link&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;nuxt-link&lt;/span&gt; &lt;span class="na"&gt;to=&lt;/span&gt;&lt;span class="s"&gt;"/explore"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Explore&lt;span class="nt"&gt;&amp;lt;/nuxt-link&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;nuxt-link&lt;/span&gt; &lt;span class="na"&gt;to=&lt;/span&gt;&lt;span class="s"&gt;"/about"&lt;/span&gt; &lt;span class="na"&gt;exact&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;About&lt;span class="nt"&gt;&amp;lt;/nuxt-link&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/nav&amp;gt;&lt;/span&gt;
...
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;with the following css&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nc"&gt;.nuxt-link-active&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;font-weight&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;bold&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;p&gt;For every nested &lt;em&gt;explore&lt;/em&gt; routes, &lt;code&gt;/explore&lt;/code&gt; will continue to have the styling. Furthermore, &lt;code&gt;/&lt;/code&gt; and &lt;code&gt;/about&lt;/code&gt; will have the styling only when the exact route matches.&lt;/p&gt;




&lt;p&gt;I hope it will help you. Keep coding!&lt;/p&gt;

</description>
      <category>nuxt</category>
      <category>vue</category>
      <category>frontend</category>
    </item>
  </channel>
</rss>
