<?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>DEV Community: Stefano Giraldi</title>
    <description>The latest articles on DEV Community by Stefano Giraldi (@sgtino).</description>
    <link>https://dev.to/sgtino</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%2F134606%2F3f8d8d38-64a2-4c34-b1ff-db24881d1bc3.jpg</url>
      <title>DEV Community: Stefano Giraldi</title>
      <link>https://dev.to/sgtino</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/sgtino"/>
    <language>en</language>
    <item>
      <title>Mount a Linux image on Windows and access to it from File Explorer with WSL2 </title>
      <dc:creator>Stefano Giraldi</dc:creator>
      <pubDate>Sat, 30 Oct 2021 10:28:46 +0000</pubDate>
      <link>https://dev.to/sgtino/mount-a-linux-image-on-windows-and-access-to-it-from-file-explorer-with-wsl2-pkm</link>
      <guid>https://dev.to/sgtino/mount-a-linux-image-on-windows-and-access-to-it-from-file-explorer-with-wsl2-pkm</guid>
      <description>&lt;h3&gt;
  
  
  Requisites
&lt;/h3&gt;

&lt;p&gt;A Windows system with WSL2 and an installed distro.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Downlaod linux distro image
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;wget __linux_image_url
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  2. Run wsl console
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ wsl
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  3. Check disk image sectors
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ partx --show __linux_image_filepath__
NR  START     END SECTORS SIZE NAME UUID
 1   8192  532479  524288 256M      9730496b-01
 2 532480 3661823 3129344 1.5G      9730496b-02
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  3. Calculate offset
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ bc
bc 1.07.1
Copyright 1991-1994, 1997, 1998, 2000, 2004, 2006, 2008, 2012-2017 Free Software Foundation, Inc.
This is free software with ABSOLUTELY NO WARRANTY.
For details type `warranty'.
&amp;gt; 532480 * 512
&amp;gt; 272629760
&amp;gt; quit
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  4. Mount Image
&lt;/h3&gt;

&lt;p&gt;Create mounting point&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ sudo mkdir /mnt/other
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Mount image&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ sudo mount -v -o offset=272629760 -t ext4 /_path_to_file_image/__filename__.img /mnt/other
mount: /dev/loop0 mounted on /mnt/other.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Check mounted image&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ ls /mnt/other
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  5. Access to Filesystem through File Explorer
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Open File Explorer&lt;/li&gt;
&lt;li&gt;Type &lt;code&gt;\\wsl$&lt;/code&gt; in the address bar&lt;/li&gt;
&lt;li&gt;Installed distros will be shown up. Click on it and navigate in the file system into the mounted path.&lt;/li&gt;
&lt;/ol&gt;

&lt;h4&gt;
  
  
  References
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://devblogs.microsoft.com/commandline/access-linux-filesystems-in-windows-and-wsl-2/"&gt;Access Linux filesystems in Windows and WSL 2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://docs.microsoft.com/en-us/answers/questions/116126/access-wsl2ubuntu-drive-from-file-explorer.html"&gt;Access WSL2/Ubuntu Drive from File Explorer&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://pureinfotech.com/mount-drive-linux-file-system-wsl-windows-11/"&gt;How to mount Linux file system using WSL on Windows 11&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://imgur.com/xO3UXVh"&gt;Mounting a Raspberry Pi disk image under WSL 2&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;em&gt;&lt;a href="https://isorepublic.com/photo/factory-button/"&gt;Photo Credit Dorolein&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

</description>
      <category>wsl</category>
      <category>powershell</category>
      <category>linux</category>
    </item>
    <item>
      <title>How to use Scoped Slot inside Vue's Render Function (Vuetify)</title>
      <dc:creator>Stefano Giraldi</dc:creator>
      <pubDate>Wed, 05 Aug 2020 13:53:28 +0000</pubDate>
      <link>https://dev.to/sgtino/how-to-use-scoped-slot-inside-vue-s-render-function-vuetify-206c</link>
      <guid>https://dev.to/sgtino/how-to-use-scoped-slot-inside-vue-s-render-function-vuetify-206c</guid>
      <description>&lt;p&gt;I tried to implement a custom component using Vue's render function. I get some problem to understand how to implement Scoped Slot inside a render function. &lt;/p&gt;

&lt;p&gt;In this post, I will share the goal with the example code.&lt;/p&gt;

&lt;h2&gt;
  
  
  Beginning with the Template
&lt;/h2&gt;

&lt;p&gt;This is the starting point. I had this simple Vue's template that I would convert into a custom component with the render function.&lt;/p&gt;

&lt;p&gt;The reason is the classical one when is useful to use render function instead of the template: get more control of the rendering code of the custom component.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;v-tooltip&lt;/span&gt; &lt;span class="na"&gt;bottom&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;template&lt;/span&gt; &lt;span class="na"&gt;v-slot:activator=&lt;/span&gt;&lt;span class="s"&gt;"{ on }"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;v-icon&lt;/span&gt; &lt;span class="na"&gt;color=&lt;/span&gt;&lt;span class="s"&gt;"primary"&lt;/span&gt; &lt;span class="na"&gt;dark&lt;/span&gt; &lt;span class="na"&gt;v-on=&lt;/span&gt;&lt;span class="s"&gt;"on"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;mdi-note&lt;span class="nt"&gt;&amp;lt;/v-icon&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/template&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;span&amp;gt;&lt;/span&gt;Tooltip&lt;span class="nt"&gt;&amp;lt;/span&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/v-tooltip&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h2&gt;
  
  
  Implementation with Vue's render function
&lt;/h2&gt;

&lt;p&gt;This is the implementation with the render function.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;CustomIconTooltip&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;CustomIconTooltip&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;props&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;tooltip&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;String&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="nx"&gt;render&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;createElement&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;createElement&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;v-tooltip&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;attrs&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;bottom&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
          &lt;span class="na"&gt;scopedSlots&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="c1"&gt;// Slot Name&lt;/span&gt;
            &lt;span class="na"&gt;activator&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt;&lt;span class="nx"&gt;on&lt;/span&gt;&lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
              &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;createElement&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
                &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;v-icon&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;attrs&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;primary&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;dark&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
                  &lt;span class="na"&gt;on&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;on&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
                &lt;span class="p"&gt;},&lt;/span&gt;
                &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;mdi-note&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;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;tooltip&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;p&gt;How to use CustomIconTooltip Component&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;custom-icon-tooltip&lt;/span&gt; &lt;span class="na"&gt;:tooltip=&lt;/span&gt;&lt;span class="s"&gt;"My Custom Icon Tooltip"&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h2&gt;
  
  
  Code Example
&lt;/h2&gt;

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

&lt;h2&gt;
  
  
  References
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://vuetifyjs.com/en/components/tooltips/"&gt;Vuetify &lt;code&gt;v-tooltip&lt;/code&gt; component&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth"&gt;Vue Render Function &amp;amp; JSX - The Data Object In-Depth&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/bnevilleoneill/accessing-the-virtual-dom-using-render-functions-in-vue-js-5fh5"&gt;Dev.to Post - Accessing the virtual DOM using render functions in Vue JS&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>vue</category>
      <category>vuetify</category>
      <category>javascript</category>
      <category>showdev</category>
    </item>
    <item>
      <title>How to implement pagination with Oracle DB in a readability way</title>
      <dc:creator>Stefano Giraldi</dc:creator>
      <pubDate>Mon, 01 Jul 2019 20:38:38 +0000</pubDate>
      <link>https://dev.to/sgtino/how-to-do-pagination-with-oracle-db-in-a-readability-way-3942</link>
      <guid>https://dev.to/sgtino/how-to-do-pagination-with-oracle-db-in-a-readability-way-3942</guid>
      <description>&lt;p&gt;It was a Sunday morning. An early Sunday morning. I was waiting for my home wake up. So I looked again to my uncompleted task: how to paginate my recordset with Oracle DB (11c...).&lt;/p&gt;

&lt;p&gt;I was inspiring to found a solution without using subselect. &lt;/p&gt;

&lt;p&gt;I tried to avoid using subselect because I consider it not so readable (I found a lot of example with it). I've found my way using &lt;a href="https://oracle-base.com/articles/misc/with-clause"&gt;&lt;code&gt;WITH&lt;/code&gt; statement&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;WITH&lt;/code&gt; statement permits to have a clean and simple SQL code.&lt;/p&gt;

&lt;p&gt;This is the result.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;WITH RECORDSET AS (
    -- put here your select with the complete recordset.
    SELECT FIELDA, FIELDB, FIELDC FROM TABLE
), 
NUMBERED AS (
    SELECT 
    ROW_NUMBER() OVER (ORDER BY FIELDA) RN, 
    RECORDSET.*
    FROM RECORDSET)
SELECT
    -- page number parameter
    :page_number PAGE_NUMBER, 
    -- total recordset pages
    CEIL((SELECT COUNT(*) FROM NUMBERED) / :page_size) TOTAL_PAGES, 
    -- page size parameter
    :page_size PAGE_SIZE, 
    -- total rows
    (SELECT COUNT(*) FROM NUMBERED) TOTAL_ROWS, 
    NUMBERED.*
FROM NUMBERED
WHERE 
    RN BETWEEN ((:page_size*:page_number)-:page_size+1) AND (:page_size*:page_number)
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;This code ask for two parameter: &lt;code&gt;:page_size&lt;/code&gt; of your recordset and &lt;code&gt;:page_number&lt;/code&gt; you want retrive.&lt;/p&gt;

&lt;p&gt;The first fields contain pagination data: &lt;code&gt;PAGE_NUMBER&lt;/code&gt;, &lt;code&gt;TOTAL_ROWS&lt;/code&gt;, &lt;code&gt;PAGE_SIZE&lt;/code&gt; and &lt;code&gt;TOTAL_ROWS&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;As well as I consider this a clean way to have a paginated recordset, I found it also very performing.&lt;/p&gt;

</description>
      <category>showdev</category>
      <category>oracledb</category>
      <category>node</category>
      <category>sql</category>
    </item>
  </channel>
</rss>
