<?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: Dimas Wihandono</title>
    <description>The latest articles on DEV Community by Dimas Wihandono (@daimessdn).</description>
    <link>https://dev.to/daimessdn</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%2F396842%2Fb1ed634e-38d0-4886-9756-506ff2e784bc.png</url>
      <title>DEV Community: Dimas Wihandono</title>
      <link>https://dev.to/daimessdn</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/daimessdn"/>
    <language>en</language>
    <item>
      <title>I've created navbar based on Dynamic Island on iPhone 14 (iOS 16)</title>
      <dc:creator>Dimas Wihandono</dc:creator>
      <pubDate>Fri, 23 Sep 2022 14:19:49 +0000</pubDate>
      <link>https://dev.to/daimessdn/ive-created-navbar-based-on-dynamic-island-on-iphone-14-ios-16-3fp0</link>
      <guid>https://dev.to/daimessdn/ive-created-navbar-based-on-dynamic-island-on-iphone-14-ios-16-3fp0</guid>
      <description>&lt;p&gt;I've create navbar based on Dynamic Island on iPhone 14 (iOS 16) using HTML, CSS, and JavaScript. Check it out!&lt;/p&gt;

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

</description>
      <category>codepen</category>
      <category>javascript</category>
      <category>dynamicisland</category>
      <category>ios16</category>
    </item>
    <item>
      <title>Testing `gedit` external tools for executing codes in Linux standard text editor.</title>
      <dc:creator>Dimas Wihandono</dc:creator>
      <pubDate>Tue, 15 Sep 2020 19:47:51 +0000</pubDate>
      <link>https://dev.to/daimessdn/testing-gedit-external-tools-for-executing-codes-50ca</link>
      <guid>https://dev.to/daimessdn/testing-gedit-external-tools-for-executing-codes-50ca</guid>
      <description>&lt;h2&gt;
  
  
  Background
&lt;/h2&gt;

&lt;p&gt;Text editors support us to create and write codes in various programming languages. In several text editors (such as &lt;a href="https://code.visualstudio.com"&gt;Visual Studio Code&lt;/a&gt;), they can also execute code written without executing or compiling the code in external terminal.&lt;/p&gt;

&lt;p&gt;Many operating systems has their own standard text editor such as Linux with its own text editor &lt;code&gt;gedit&lt;/code&gt;. Unlike other standard text editors, &lt;code&gt;gedit&lt;/code&gt; has special features. It can highlight codes based on code written, and it can also execute codes using plugins!&lt;/p&gt;

&lt;p&gt;I'm currently using Ubuntu 18.04 as primary operating system and get interested to try external tools plugin in &lt;code&gt;gedit&lt;/code&gt; which has been installed by default in Ubuntu 18.04.&lt;/p&gt;

&lt;h2&gt;
  
  
  Methodology
&lt;/h2&gt;

&lt;p&gt;By opening &lt;strong&gt;Text Editor&lt;/strong&gt; first&lt;/p&gt;

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

&lt;p&gt;By clicking text editor menu on the &lt;strong&gt;Top Bar&lt;/strong&gt; and accessing the preferences...&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--79fKtgU7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/ofzyf60tunictsxu4mb7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--79fKtgU7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/ofzyf60tunictsxu4mb7.png" alt="text editor menu"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--MkfwDn7J--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/v7hk8ru3f1i9g9tw15oe.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--MkfwDn7J--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/v7hk8ru3f1i9g9tw15oe.png" alt="text editor preferences"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Accessing &lt;strong&gt;Plugins&lt;/strong&gt; tab, we can enable "External Tools" by checking it and finally use it...&lt;/p&gt;

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

&lt;p&gt;Finally, we can create some extra commands for executing code externally by access external tools menu (by clicking Text Editor menu -&amp;gt; Manage External Tools...).&lt;/p&gt;

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

&lt;p&gt;By clicking the plus sign button in the bottom left corner, it will create the new empty tool). There are interesting stuffs that we can see with this external tools menu&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Space for writing&lt;/strong&gt; external tools command (usually using Linux &lt;code&gt;bash&lt;/code&gt; code, but in my observation it can also use &lt;code&gt;Python&lt;/code&gt;).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Shortcut key&lt;/strong&gt; for triggering keyboard shortcut to execute the commands.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Input&lt;/strong&gt; for specify the input source (if the program receives some input).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Output&lt;/strong&gt; for specify the output.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Applicability&lt;/strong&gt; for specify which document supports for this external tool command.&lt;/li&gt;
&lt;/ul&gt;

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

&lt;p&gt;for example, I would like to &lt;strong&gt;execute some JavaScript code using external tools&lt;/strong&gt;. We knew that we can use &lt;code&gt;node appname.js&lt;/code&gt; for executing JavaScript file using Node.js (assuming Node.js has already installed). By typing the command inside the space,&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;node &lt;span class="nv"&gt;$GEDIT_CURRENT_DOCUMENT_NAME&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;and applying shortcut using F5, we have successfully created our first external command. &lt;code&gt;$GEDIT_CURRENT_DOCUMENT_NAME&lt;/code&gt; is some &lt;code&gt;gedit&lt;/code&gt; variable that we can see in &lt;a href="https://wiki.gnome.org/Apps/Gedit/Plugins/ExternalTools"&gt;this link&lt;/a&gt;.&lt;/p&gt;

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

&lt;h2&gt;
  
  
  Simulation
&lt;/h2&gt;

&lt;p&gt;Let's test our command in our simple JS file by pressing F5 and we found show the results based on Node.js command.&lt;/p&gt;

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

&lt;p&gt;Let's try the another external code for opening files such as &lt;strong&gt;Python&lt;/strong&gt; and &lt;strong&gt;JavaScript&lt;/strong&gt; by typing this code and same shortcut.&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/sh&lt;/span&gt;
&lt;span class="nv"&gt;TYPE&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="nv"&gt;$GEDIT_CURRENT_DOCUMENT_TYPE&lt;/span&gt;
&lt;span class="nv"&gt;APP_NAME&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="nv"&gt;$GEDIT_CURRENT_DOCUMENT_NAME&lt;/span&gt;

&lt;span class="c"&gt;# checking file mime-type&lt;/span&gt;
&lt;span class="c"&gt;# $TYPE&lt;/span&gt;

&lt;span class="c"&gt;# switch conditional&lt;/span&gt;
&lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="nv"&gt;$TYPE&lt;/span&gt; &lt;span class="k"&gt;in&lt;/span&gt;
    &lt;span class="c"&gt;## nodejs&lt;/span&gt;
    &lt;span class="s2"&gt;"application/javascript"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        node &lt;span class="nv"&gt;$APP_NAME&lt;/span&gt;
        &lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"Nodejs file executed"&lt;/span&gt;
    &lt;span class="p"&gt;;;&lt;/span&gt;
    &lt;span class="c"&gt;## python&lt;/span&gt;
    &lt;span class="s2"&gt;"text/x-python"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        python3 &lt;span class="nv"&gt;$APP_NAME&lt;/span&gt;
        &lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"Python file executed"&lt;/span&gt;
    &lt;span class="p"&gt;;;&lt;/span&gt;
    &lt;span class="c"&gt;## else&lt;/span&gt;
    &lt;span class="k"&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;"Not supported programming file"&lt;/span&gt;
    &lt;span class="p"&gt;;;&lt;/span&gt;
&lt;span class="k"&gt;esac&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;p&gt;It executes successfully on JavaScript file (Node.js)&lt;/p&gt;

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

&lt;p&gt;And it also executes successfully on Python file&lt;/p&gt;

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

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

&lt;p&gt;In conclusion, &lt;code&gt;gedit&lt;/code&gt; can executes file externally using external tools. By using some &lt;code&gt;bash&lt;/code&gt; code, it can used for create command for execute codes for various functions.&lt;/p&gt;

&lt;h2&gt;
  
  
  Some reference(s)
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;GNOME Gedit External Tools documentation (&lt;a href="https://wiki.gnome.org/Apps/Gedit/Plugins/ExternalTools"&gt;https://wiki.gnome.org/Apps/Gedit/Plugins/ExternalTools&lt;/a&gt;)&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>linux</category>
      <category>programming</category>
      <category>tutorial</category>
      <category>tips</category>
    </item>
    <item>
      <title>What should I do for my first open source project?</title>
      <dc:creator>Dimas Wihandono</dc:creator>
      <pubDate>Thu, 03 Sep 2020 07:23:07 +0000</pubDate>
      <link>https://dev.to/daimessdn/has-anyone-started-an-open-source-project-2i09</link>
      <guid>https://dev.to/daimessdn/has-anyone-started-an-open-source-project-2i09</guid>
      <description>&lt;p&gt;Hi, everyone...&lt;/p&gt;

&lt;p&gt;I need some advice to create some open source project.&lt;/p&gt;

&lt;p&gt;I want to create some project to collect information of scholarships and learning bootcamps to share those information (and also persuade people who have scholarship information to share information together) for everyone. But I never create open-source project before.&lt;/p&gt;

&lt;p&gt;What should I do to make my first open-source project?&lt;/p&gt;

&lt;p&gt;Thanks...&lt;/p&gt;

</description>
      <category>question</category>
      <category>opensource</category>
    </item>
  </channel>
</rss>
