<?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: Do Hoang</title>
    <description>The latest articles on DEV Community by Do Hoang (@huyhoang8398).</description>
    <link>https://dev.to/huyhoang8398</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%2F280829%2F38d37e73-1a3e-4f2e-83d9-ab75c097b08b.png</url>
      <title>DEV Community: Do Hoang</title>
      <link>https://dev.to/huyhoang8398</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/huyhoang8398"/>
    <language>en</language>
    <item>
      <title>Learning Sed Is Beneficial For Linux Users</title>
      <dc:creator>Do Hoang</dc:creator>
      <pubDate>Mon, 01 Nov 2021 15:59:14 +0000</pubDate>
      <link>https://dev.to/huyhoang8398/learning-sed-is-beneficial-for-linux-users-149l</link>
      <guid>https://dev.to/huyhoang8398/learning-sed-is-beneficial-for-linux-users-149l</guid>
      <description>&lt;p&gt;One of the most important command line utility in Linux is &lt;code&gt;sed&lt;/code&gt; which is a stream editor.&lt;br&gt;
A stream editor is used to perform basic text transformations on an input stream (a file or input from a pipeline).&lt;/p&gt;

&lt;p&gt;Essentially what it can do is it allows you to search for String of text or specific pattern and then replace it pattern with whatever you tell sed to replace with, so it is really kind of search and replace function.&lt;/p&gt;
&lt;h3&gt;
  
  
  Basic sed substitution 's'
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;sed&lt;/span&gt; &lt;span class="s1"&gt;'s/find/replace/'&lt;/span&gt; &amp;lt;oldfile &lt;span class="o"&gt;&amp;gt;&lt;/span&gt;newfile
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;So we are telling sed that go search for the word &lt;code&gt;find&lt;/code&gt; then replace it with the word &lt;code&gt;replace&lt;/code&gt; and what it does is it searches every lines for its first instance of the word &lt;code&gt;find&lt;/code&gt;. So it not gonna replace every instances of &lt;code&gt;find&lt;/code&gt;, only the first time it appears on each line from &lt;code&gt;oldfile&lt;/code&gt; and then writes it to &lt;code&gt;newfile&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Sometimes you want to replace every &lt;code&gt;find&lt;/code&gt; in &lt;code&gt;oldfile&lt;/code&gt; you just need to add global substitution &lt;code&gt;g&lt;/code&gt; for every instances &lt;code&gt;find&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;sed&lt;/span&gt; &lt;span class="s1"&gt;'s/find/replace/g'&lt;/span&gt; &amp;lt;oldfile &lt;span class="o"&gt;&amp;gt;&lt;/span&gt;newfile
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;But What if you just want to take a file, change it then write to that same file, you could use &lt;code&gt;-i&lt;/code&gt; flag.&lt;br&gt;
It will replace all occurrences of a string in a file, overwriting the file (i.e. in-place):&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;sed&lt;/span&gt; &lt;span class="nt"&gt;-i&lt;/span&gt; &lt;span class="s1"&gt;'s/find/replace/g'&lt;/span&gt; filename
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You are not often doing this as far taking input from a file and then taking the output and write to new file. Probably most of the time, you take the output from other shell command and pipe it to &lt;code&gt;sed&lt;/code&gt; command. For example:&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;echo&lt;/span&gt; &lt;span class="s2"&gt;"Thank Do Hoang"&lt;/span&gt; | &lt;span class="nb"&gt;sed&lt;/span&gt; &lt;span class="s1"&gt;'s/Ho/W/'&lt;/span&gt;
Thank Do Wang
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Other basic usage:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;To replace only on lines matching the line pattern:
&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;sed&lt;/span&gt; &lt;span class="s1"&gt;'/line_pattern/s/find/replace/'&lt;/span&gt; filename
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Delete lines matching the line pattern:
&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;sed&lt;/span&gt; &lt;span class="s1"&gt;'/line_pattern/d'&lt;/span&gt; filename
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Print the first 11 lines of a file:
&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;sed &lt;/span&gt;11q filename
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Apply multiple find-replace expressions to a file:
&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;sed&lt;/span&gt; &lt;span class="nt"&gt;-e&lt;/span&gt; &lt;span class="s1"&gt;'s/find/replace/'&lt;/span&gt; &lt;span class="nt"&gt;-e&lt;/span&gt; &lt;span class="s1"&gt;'s/find/replace/'&lt;/span&gt; filename
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Replace separator &lt;code&gt;/&lt;/code&gt; by any other character not used in the find or replace patterns, e.g. &lt;code&gt;#&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="nb"&gt;sed&lt;/span&gt; &lt;span class="s1"&gt;'s#find#replace#'&lt;/span&gt; filename
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;What if I want to search for multiple pattern?&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;cat&lt;/span&gt; /etc/shells | &lt;span class="nb"&gt;sed&lt;/span&gt; &lt;span class="nt"&gt;-e&lt;/span&gt; &lt;span class="s1"&gt;'s/usr/u/g'&lt;/span&gt; &lt;span class="nt"&gt;-e&lt;/span&gt; &lt;span class="s1"&gt;'s/bin/b/g'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Sed is not picky about the symbol that you use for the separator in the&lt;br&gt;
command, if you dont want to use the /, you can use pretty much any others kind of special symbol that you can think of as long as it is not part of the search pattern.&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;cat&lt;/span&gt; /etc/shells | &lt;span class="nb"&gt;sed&lt;/span&gt; &lt;span class="nt"&gt;-e&lt;/span&gt; &lt;span class="s1"&gt;'s|usr|u|g'&lt;/span&gt; &lt;span class="nt"&gt;-e&lt;/span&gt; &lt;span class="s1"&gt;'s#bin#b#g'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You can also print specific line that match the search pattern ( kind of &lt;code&gt;grep&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;cat&lt;/span&gt; /etc/shells | &lt;span class="nb"&gt;sed&lt;/span&gt; &lt;span class="nt"&gt;-n&lt;/span&gt; &lt;span class="s1"&gt;'/usr/p'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The cool trick about &lt;code&gt;sed&lt;/code&gt; is to go and delete extra spaces at the end of the line, for example&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;sed&lt;/span&gt; &lt;span class="nt"&gt;-i&lt;/span&gt; &lt;span class="s1"&gt;'s/ *$//'&lt;/span&gt; test.sh
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It will search for every lines that has spaces at the end of it and replace it with nothing (basically deleting them).&lt;br&gt;
How about &lt;strong&gt;tabs&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;sed&lt;/span&gt; &lt;span class="nt"&gt;-i&lt;/span&gt; &lt;span class="s1"&gt;'s/[[:space:]]*$//'&lt;/span&gt; test.sh
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;empty lines?&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;cat &lt;/span&gt;test.sh | &lt;span class="nb"&gt;sed&lt;/span&gt; &lt;span class="s1"&gt;'/^$/d'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;First the &lt;code&gt;^&lt;/code&gt; is the begining of the line then the &lt;code&gt;$&lt;/code&gt; symbol is the end of the line ( find every pattern that match the begining of the line, and the end of the line and there is nothing between it - so that means that line is empty ).&lt;/p&gt;

&lt;p&gt;You can also replace all the lowercase characters with uppercase characters for fun 🙃&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;sed&lt;/span&gt; &lt;span class="s1"&gt;'s/[a-z]\/U&amp;amp;/g'&lt;/span&gt; test.sh // uppercase
&lt;span class="nb"&gt;sed&lt;/span&gt; &lt;span class="s1"&gt;'s/[a-z]\/L&amp;amp;/g'&lt;/span&gt; test.sh // lowercase
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;C'est tout, merci kn 🙃&lt;/p&gt;

</description>
      <category>linux</category>
      <category>sed</category>
    </item>
    <item>
      <title>Development of University of Science and Technology of Hanoi interactive virtual world using Unreal Engine</title>
      <dc:creator>Do Hoang</dc:creator>
      <pubDate>Thu, 21 May 2020 22:04:15 +0000</pubDate>
      <link>https://dev.to/huyhoang8398/development-of-university-of-science-and-technology-of-hanoi-interactive-virtual-world-using-unreal-engine-28jd</link>
      <guid>https://dev.to/huyhoang8398/development-of-university-of-science-and-technology-of-hanoi-interactive-virtual-world-using-unreal-engine-28jd</guid>
      <description>&lt;p&gt;&lt;a href="https://i.giphy.com/media/cl1vuFIgcCHPPZCDlE/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/cl1vuFIgcCHPPZCDlE/giphy.gif" alt="Demo"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Context and Motivation
&lt;/h3&gt;

&lt;p&gt;Today's virtual worlds are purpose-built for entertainment, social, educational, training and various other purposes. It is being more better than the real world. So the virtual reality has take over everything. For instance the illustrations showed in a game are more better than the reality we live in. It provides the gamer a whole new experience by taking over his imaginations it’s as if we are playing the real game with all those real gaming characters in the real life. Virtual world is bringing out all our imaginations so that we can experience it in reality. Similarly for the automobile industry we can take a virtual ride of the desired vehicle we want to buy which provides a whole new dimension to the world of buying things. &lt;/p&gt;

&lt;p&gt;Moreovers, virtual world has been adopted in education for teaching and learning situations. Students are able to interact with each other and within a three dimensional environment. Students can also be taken on virtual field trips, for example, to museums, taking tours of the solar system and going back in time to different eras. In this internship, I’ll mainly focus on entertainment-based virtual world as it’s closer to real world we are living, bring a pleasant for us, especially with 3D environment.&lt;/p&gt;

&lt;p&gt;In this work, I will focus on creating 3D models from scratch and also  build a demo of 3D virtual world of my University in Vietnam using Unreal Engine, whereas a player can walk through, and interact with some objects. This application can be used for celebrating 10 years of USTH, marketing, and also &lt;br&gt;
for remote students/parents have a virtual trips before applying to our university or any USTH student who is studying abroad.&lt;/p&gt;
&lt;h2&gt;
  
  
  How I built it
&lt;/h2&gt;
&lt;h3&gt;
  
  
  Work flow
&lt;/h3&gt;

&lt;p&gt;Having three months internship at USTH ICT lab, my work will be divided into four main steps as the figure above to successfully build and create both University 3D models and virtual world.&lt;/p&gt;

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

&lt;p&gt;&lt;strong&gt;Input Data&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Collect a dataset&lt;/strong&gt; of &lt;em&gt;2D images&lt;/em&gt; of my University: 

&lt;ul&gt;
&lt;li&gt;This work is the first step and is one of the important task.&lt;/li&gt;
&lt;li&gt;Data will be 2D images, videos.&lt;/li&gt;
&lt;li&gt;We will use a simple camera from a smartphone to perform this task. After taking pictures with different view and also furnitures of USTH, these photos will be classified to specific folder ( e.g: Room 5/Lab ICT). This approach has two drawbacks howerver, it is time-consuming and easy to make mistakes.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Modelling&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Conduct&lt;/strong&gt; fully 3D models from collected 2D images which will be a 3D model foundations for other reaseacher or developer to create others world of USTH. To create a fully 3D models from scratch ( 2D images, videos, floor plan), this task will be breaked down into four steps as the figures below. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--YlqpqQr7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/pdk07b599tl4imppwdfe.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--YlqpqQr7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/pdk07b599tl4imppwdfe.png" alt="3D modelling steps"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h4&gt;
  
  
  Ground Prep / Floor plan
&lt;/h4&gt;

&lt;p&gt;First of all we need to create a Floor Plans. Thus the university provided me a 2D legacy floor plan images, but it is captured from&lt;br&gt;
a cemera intead of a digital floorplan, so i will need to transfer it into a digital version as the picture below.&lt;/p&gt;

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

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--r1hKqEMD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/749uhrmmhec58anwbu4b.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--r1hKqEMD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/749uhrmmhec58anwbu4b.jpg" alt="Digital version"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h4&gt;
  
  
  Structure and Interior Walls
&lt;/h4&gt;

&lt;p&gt;To structure and interior walls is quite simple thus we already have the digital floor plans version, Now by using &lt;em&gt;offset&lt;/em&gt; tool, it will allow you to draw a offset of a perimeter, so in this case i can dictate how thick our walls is. And as the default parameter in Architecture field, i will set it equal to six inches.&lt;/p&gt;

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

&lt;p&gt;Finally in order to make the 3D model complete, we import sketchup textures, create custom materials and also add furniture objects. These furnitures can be found in the 3D warehouse store which comes with SketchUp when installed. Sometime I also need to create some special models in my University thus it cannot be found in the store. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ck-q0kp9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/yqozmj0gr64tuniv8n85.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ck-q0kp9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/yqozmj0gr64tuniv8n85.png" alt="Example 1"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--JMxYvJR4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/9gu7177vn695t0uwadlr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--JMxYvJR4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/9gu7177vn695t0uwadlr.png" alt="Example 2"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--hMJlLP20--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/f7sn17o5ytu5qx0nno1r.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--hMJlLP20--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/f7sn17o5ytu5qx0nno1r.png" alt="Example 3"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I also built some special furniture that only has in Vietnam like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--L2TxVwjp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/pgluzn8v7j90lx526kys.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--L2TxVwjp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/pgluzn8v7j90lx526kys.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  The final work: Unreal Engine and Creating my University 3D virtual world
&lt;/h3&gt;

&lt;p&gt;We start making our 3D virtual world by adding player, light, interact, and some technique like &lt;em&gt;level streaming&lt;/em&gt;...&lt;/p&gt;

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

&lt;p&gt;This application will be built to run on Window, MacOS and Linux thus we are focusing on marketing, and for students and USTH's lecturers. &lt;/p&gt;

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

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

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--1m2f2DZc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/kefg3t56tjw02b8ylmrm.JPG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--1m2f2DZc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/kefg3t56tjw02b8ylmrm.JPG" alt="real"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--m6A8shkf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/tizy8muorh8b8q99r5bd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--m6A8shkf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/tizy8muorh8b8q99r5bd.png" alt="unReal"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ojIM6sa7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/ebqbzuap8zuosr71cge7.JPG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ojIM6sa7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/ebqbzuap8zuosr71cge7.JPG" alt="Real"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--YEZIx1pu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/3xu8z077zesf4dadp1ui.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--YEZIx1pu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/3xu8z077zesf4dadp1ui.PNG" alt="Unreal"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Demo Gif
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/cl1vuFIgcCHPPZCDlE/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/cl1vuFIgcCHPPZCDlE/giphy.gif" alt="Demo"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Download
&lt;/h2&gt;

&lt;p&gt;There is more laboratory room in my university that wasnt included in this post but&lt;br&gt;
You can download my application for discorvering my university in Hanoi &lt;a href="https://drive.google.com/drive/folders/1AOLKdLRUaUZaHy3KVtGqAHmkXWelK9j4?usp=sharing"&gt;here!!!&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Link to Code
&lt;/h2&gt;

&lt;p&gt;You can read my thesis and project at &lt;/p&gt;
&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--vWogaON8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/github-logo-28d89282e0daa1e2496205e2f218a44c755b0dd6536bbadf5ed5a44a7ca54716.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/huyhoang8398"&gt;
        huyhoang8398
      &lt;/a&gt; / &lt;a href="https://github.com/huyhoang8398/internship"&gt;
        internship
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      USTH Intership - UnrealEngine - 3D Modelling 
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;h1&gt;
internship&lt;/h1&gt;
&lt;p&gt;USTH Intership - UnrealEngine - 3D Modelling&lt;/p&gt;
&lt;/div&gt;



&lt;/div&gt;
&lt;br&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/huyhoang8398/internship"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;br&gt;
&lt;/div&gt;
&lt;br&gt;


&lt;h2&gt;
  
  
  Additional Thoughts / Feelings / Stories
&lt;/h2&gt;

&lt;p&gt;After 3 years studying Computer Science at University of Science and Technology of Hanoi, this is my biggest project about software engineering and also my proudest project for my university 10-year anniversary&lt;/p&gt;

</description>
      <category>octograd2020</category>
      <category>devgrad2020</category>
      <category>showdev</category>
      <category>unrealengine</category>
    </item>
    <item>
      <title>I made the switch from Mac to Linux"</title>
      <dc:creator>Do Hoang</dc:creator>
      <pubDate>Mon, 13 Jan 2020 14:05:47 +0000</pubDate>
      <link>https://dev.to/huyhoang8398/i-made-the-switch-from-mac-to-linux-4i9e</link>
      <guid>https://dev.to/huyhoang8398/i-made-the-switch-from-mac-to-linux-4i9e</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;I have been a huge Mac fan and power user since I started in IT in 2015.&lt;br&gt;
But a few months ago—for several reasons — I made the commitment to shift to Linux as my daily driver.&lt;br&gt;
This isn't my first attempt at fully adopting Linux, but I'm finding it easier than ever.&lt;br&gt;
Here is what inspired me to switch.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Im falling in love with macOS
&lt;/h2&gt;

&lt;p&gt;First of all, in 2015 I had my very first macOS laptop which is an Macbook air 13 inch model.&lt;br&gt;
Before that, I use Linux as my daily driver.&lt;br&gt;
The macbook air is light, fast, the battery life is awesome.&lt;br&gt;
It came with macOS El Capitan at that moment - which is ultrafast comparing to window and linux.&lt;/p&gt;

&lt;h2&gt;
  
  
  Macbook is not the best ultrabook nowaday
&lt;/h2&gt;

&lt;p&gt;Recently I have a gift which is a new Macbook Pro 2017 without touchbar version.&lt;br&gt;
The design is great, very beautiful screen, the trackpad is good and also the battery life.&lt;br&gt;
But It shipped with the Butterfly gen 2 which has alot of issues, and Apple said that they did fix these problem in 2nd generation but...&lt;/p&gt;

&lt;p&gt;My keyButterfly keys use a butterfly mechanism that's different from the scissor mechanism used for traditional keyboards.&lt;br&gt;
It's called a butterfly mechanism because the components underneath the key resembles a butterfly's wings, with a hinge in the center rather than overlapping like a pair of scissors.&lt;/p&gt;

&lt;p&gt;Apple swapped to a butterfly mechanism to make a thinner keyboard, which is possible because each key moves less when pressed so less space is needed.&lt;br&gt;
The keyboard provides a satisfying amount of travel and stability when each key is pressed, but unfortunately, the thin butterfly mechanism can get jammed up with crumbs, dust, and other particulates, resulting in keys that don't press properly, keys that skip keystrokes, or keys that repeat letters.&lt;br&gt;
board&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--_K1lu94U--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/sfyg6jaqy90w5fbrsbpb.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--_K1lu94U--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/sfyg6jaqy90w5fbrsbpb.jpg" alt="Traditional vs Butterfly keyboard"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Keyboard failure is an in Apple's notebooks because replacing the keyboard requires the entire top assembly of the computer to be replaced, which is not a cheap repair.&lt;/p&gt;

&lt;p&gt;Unfortunately, I fall into that trouble 3 times just 2 weeks after purchase.&lt;br&gt;
So I decided to trade it to a new dell xps 13 inch 2019 model.&lt;/p&gt;

&lt;h2&gt;
  
  
  Dell XPS - my new favourite ultrabook
&lt;/h2&gt;

&lt;p&gt;The dell xps is slightly thicker than the macbook but they are both lightweight and beautiful.&lt;br&gt;
The performance is solid, though not industry-leading by any means.&lt;br&gt;
All the XPS 13 laptops use eighth-generation Core CPUs.&lt;br&gt;
Comparing to my old Macbook, the performance is much better. More cores haha \m/&lt;/p&gt;

&lt;h2&gt;
  
  
  Dell XPS + Archlinux &amp;gt; MacOS
&lt;/h2&gt;

&lt;p&gt;So I decided to install Archlinux on this machine thus Im a fan of this Linux Distribution.&lt;br&gt;
I also have a PC running Arch powered by Ryzen 🎉🎉🎉&lt;/p&gt;

&lt;p&gt;There was only a few issue on this machine, first of all is the &lt;code&gt;coil whine sound&lt;/code&gt; :(, I still have no idea how to fix it, not that loud, but weird on a expensive laptop like this.&lt;br&gt;
The other thing is &lt;code&gt;screen flickering&lt;/code&gt;.&lt;br&gt;
Panel Self Refresh (PSR), a power saving feature used by Intel iGPUs is known to cause flickering in some instances.&lt;br&gt;
A temporary solution is to disable this feature using the kernel parameter i915.enable_psr=0&lt;/p&gt;

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

&lt;p&gt;Im using Archlinux + KDE, used to be a fan of i3wm but I want to give a try on KDE.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--AU3VACAd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/7didqtg4mlcjlaybchoo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--AU3VACAd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/7didqtg4mlcjlaybchoo.png" alt="Dell XPS Archlinux + KDE"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Thus this have only been used for 2 days so need more time for review. I will update in some future posts.&lt;/p&gt;

</description>
      <category>linux</category>
      <category>dell</category>
      <category>xps</category>
      <category>archlinux</category>
    </item>
    <item>
      <title>How I escaped from Microsoft Office tools as a Computer Science student</title>
      <dc:creator>Do Hoang</dc:creator>
      <pubDate>Wed, 11 Dec 2019 06:28:22 +0000</pubDate>
      <link>https://dev.to/huyhoang8398/how-i-escaped-from-microsoft-office-tools-as-a-computer-science-student-6ka</link>
      <guid>https://dev.to/huyhoang8398/how-i-escaped-from-microsoft-office-tools-as-a-computer-science-student-6ka</guid>
      <description>&lt;p&gt;&lt;em&gt;This post was originally published on &lt;a href="http://thecodecousins.com/"&gt;thecodecousins&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Motivation
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--yOcJjMHQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/ektqvhen6sgys5neoocn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--yOcJjMHQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/ektqvhen6sgys5neoocn.png" alt="Pandoc Markdow presentation VS Microsoft Powerpoint"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I have used beamer quite a lot to prepare slides for both research and class presentations.&lt;br&gt;
I have started to use LaTeX to content in beamer presentation for two years.&lt;br&gt;
Sometimes I was concerned about the high ratio of markup to content in beamer presentations.&lt;br&gt;
I used to type thousands lines of code just to create a presentation slide which was tiring and time consuming.&lt;br&gt;
Thus, I did some research and found a combination of pandoc, markdown, and LaTeX to simplify my process.&lt;br&gt;
In my point of view, markdown in syntax is straightforward, easy to read and modify. &lt;br&gt;
Moreover, pandoc has the ability to convert markdown files into LaTeX, hence enabled me to customise my slides greatly later on.&lt;/p&gt;

&lt;p&gt;In this blog, I want to discuss about the creation of beamer presentations using a combination of &lt;em&gt;markdown, pandoc, and LaTeX&lt;/em&gt;.&lt;br&gt;
This workflow offers the potential to reduce typing and increase readability of beamer presentation source code.&lt;br&gt;
After reading this blog, you would be able to create a slide by using both Markdown and LaTeX and without having to rely on Powerpoint. &lt;/p&gt;
&lt;h2&gt;
  
  
  Why Pandoc For Presentation?
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Presentation shouldn’t get in the way of content.&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;With a word processor, you spend valuable time agonizing over&lt;br&gt;
what font size to make the section headings.&lt;/p&gt;

&lt;p&gt;→ With &lt;em&gt;Pandoc&lt;/em&gt;, you just tell it to start a new section.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;With a word processor, changing the formatting means you have to&lt;br&gt;
change each instance individually.&lt;/p&gt;

&lt;p&gt;→ With &lt;em&gt;Pandoc&lt;/em&gt;, you just redefine the relevant commands&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;With a word processor, you have to carefully match any provided&lt;br&gt;
templates.&lt;/p&gt;

&lt;p&gt;→ With &lt;em&gt;Pandoc&lt;/em&gt;, you can be sure you’ve fit the template, and switch&lt;br&gt;
templates easily.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Lower ratio of markup to content in beamer presentations comparing to LaTeX.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Beautiful.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Pretty Math Equation - From my point of view as a researcher.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  Installation Guide
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Integrated Software&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Thus we want to make our slide looks like &lt;em&gt;LaTeX&lt;/em&gt; typesets so a Basic LaTeX package is required. \&lt;br&gt;
I strongly recommend not just installing the TeX compiler, but &lt;em&gt;all&lt;/em&gt; TeX packages for your own convenience, so you have everything available offline.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;On GNU/Linux:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;On Debian-based distros (Ubuntu/Linux Mint):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;sudo &lt;/span&gt;apt-get &lt;span class="nb"&gt;install &lt;/span&gt;texlive-full
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;For Arch-based distros (Manjaro, Parabola, Antergos):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;sudo &lt;/span&gt;pacman &lt;span class="nt"&gt;-S&lt;/span&gt; texlive-most texlive-lang
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;On Windows&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Download and install the packages &lt;em&gt;&lt;a href="https://miktex.org/download/#collapse264"&gt;here&lt;/a&gt;&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;On MacOS&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Download and install the packages &lt;em&gt;&lt;a href="https://tug.org/mactex/"&gt;here&lt;/a&gt;&lt;/em&gt;. Or via Brew:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;brew cask &lt;span class="nb"&gt;install &lt;/span&gt;mactex
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;After installing LaTeX, the next step is to get Pandoc - a universal document converter.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;On GNU/Linux&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;For each linux distribution, you might have a different pandoc package's name in your package manager. &lt;br&gt;
For example in ArchLinux, we can install pandoc with:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;sudo &lt;/span&gt;pacman &lt;span class="nt"&gt;-S&lt;/span&gt; pandoc
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;But if you want to get the latest version ( you might want to check whether the pandoc version in your package manager is not outdated ), we can get the binary package for amd64 architecture on the &lt;em&gt;&lt;a href="https://github.com/jgm/pandoc/releases/tag/2.7.3"&gt;download page&lt;/a&gt;&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;On MacOS&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;brew &lt;span class="nb"&gt;install &lt;/span&gt;pandoc
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;On Windows&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;You can get the latest version on the &lt;em&gt;&lt;a href="https://github.com/jgm/pandoc/releases/tag/2.7.3"&gt;dowload page&lt;/a&gt;&lt;/em&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Getting started
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--TPci7_1M--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/pnvyoo5daotzfzqbo1em.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--TPci7_1M--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/pnvyoo5daotzfzqbo1em.jpg" alt="Markdown everywhere"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We are computer scientists 😍😍😍, as I mentioned before, making an academic presentation without having to write LaTeX ( with tons of syntax,... ) is our main goal.&lt;br&gt;
Pandoc provides us a way to convert between numerous markups and word processing formats, including, but not limited to, various flavors of Markdown, Latex, HTML.&lt;/p&gt;

&lt;p&gt;To create a slide shows with Pandoc is quite simple because the basic syntax is Markdown which is a familiar language with all developers or computer scientist. &lt;/p&gt;

&lt;p&gt;Let's create some slide with Pandoc !!!  🎉🎉🎉&lt;/p&gt;

&lt;p&gt;Create a &lt;code&gt;main.md&lt;/code&gt; file that contains:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight markdown"&gt;&lt;code&gt;&lt;span class="gh"&gt;# Section heading 1 slide&lt;/span&gt;
&lt;span class="gu"&gt;## Slide 1 of Section 1 &lt;/span&gt;
&lt;span class="p"&gt;-&lt;/span&gt; This is a list 
&lt;span class="p"&gt;-&lt;/span&gt; Another list item
&lt;span class="p"&gt;-&lt;/span&gt; etc,...

&lt;span class="p"&gt;![&lt;/span&gt;&lt;span class="nv"&gt;Image example&lt;/span&gt;&lt;span class="p"&gt;](&lt;/span&gt;&lt;span class="sx"&gt;testImage.png&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="gh"&gt;# Section heading 2&lt;/span&gt;
...
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Once you have pandoc and latex (with packages to run beamer) installed, you just have to use the following command to compile the presentation:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;pandoc main.md &lt;span class="nt"&gt;-t&lt;/span&gt; beamer &lt;span class="nt"&gt;-o&lt;/span&gt; output.pdf
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--3zEpB1JI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/tdvd5yjdkpdw2m1lnq7c.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--3zEpB1JI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/tdvd5yjdkpdw2m1lnq7c.png" alt="Compile Flow"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Pandoc converted &lt;code&gt;main.md&lt;/code&gt; into a beamer latex file main.tex and after that they use the default way (&lt;code&gt;pdflatex&lt;/code&gt;) to transfer beamer &lt;code&gt;*.tex&lt;/code&gt; to a Presentation file.&lt;br&gt;
By default, pandoc will use &lt;code&gt;slide-level=2&lt;/code&gt;, it means that level 1 markdown headings represents section headings - as the picture below ( line preceded with a single hash &lt;code&gt;# Section heading 2&lt;/code&gt;).&lt;br&gt;
And Level 2 headings represented a new slide with the title name. ( line preceded with double hash &lt;code&gt;## Slide 1 of Section 1&lt;/code&gt;). &lt;br&gt;
So that the headings above the defined number in the hierarchy are used to divide the slide show into sections; the headings below the defined number create subheads within a slide. &lt;br&gt;
You might want to read more about &lt;a href="https://pandoc.org/MANUAL.html#structuring-the-slide-show"&gt;Structuring the slide show.&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Code explaination&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The first line adds a section title. This is not part of the slide, but can be used to generate table of contents, and in-slide navigation.&lt;/li&gt;
&lt;li&gt;The second line creates a new slide with the slide title.&lt;/li&gt;
&lt;li&gt;To create a &lt;code&gt;itemize&lt;/code&gt; as LaTeX, we can use the same method in markdown.&lt;/li&gt;
&lt;li&gt;Also we can use the same method in markdow to create a figure, table inside a slide.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Result&lt;/strong&gt; &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--hED1uFfK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/1bjyt9ca7fdqqzf9iqb2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--hED1uFfK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/1bjyt9ca7fdqqzf9iqb2.png" alt="Result Example"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Code comparation with LaTeX&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight tex"&gt;&lt;code&gt;&lt;span class="k"&gt;\documentclass&lt;/span&gt;&lt;span class="na"&gt;[t]&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;beamer&lt;span class="p"&gt;}&lt;/span&gt;  
&lt;span class="k"&gt;\setbeamertemplate&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;navigation symbols&lt;span class="p"&gt;}{}&lt;/span&gt;
&lt;span class="nt"&gt;\begin{document}&lt;/span&gt;
&lt;span class="k"&gt;\section&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;Section heading 1 slide&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nt"&gt;\begin{frame}&lt;/span&gt;
&lt;span class="k"&gt;\frametitle&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;Slide 1 of Section 1&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nt"&gt;\begin{itemize}&lt;/span&gt;
  &lt;span class="k"&gt;\item&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    This is a list 
  &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="k"&gt;\item&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    Another list item
  &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="k"&gt;\item&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
    etc,...
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nt"&gt;\end{itemize}&lt;/span&gt;
&lt;span class="nt"&gt;\begin{figure}&lt;/span&gt;
  &lt;span class="k"&gt;\includegraphics&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;testImage.png&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nt"&gt;\end{figure}&lt;/span&gt;
&lt;span class="nt"&gt;\end{frame}&lt;/span&gt;
&lt;span class="k"&gt;\section&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;Section 2&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nt"&gt;\end{document}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;→ Markdown is muchhhhhhhhh shorter line of code comparing to LaTeX with the same content.&lt;/p&gt;

&lt;h2&gt;
  
  
  Advanced configuration
&lt;/h2&gt;

&lt;h4&gt;
  
  
  YAML
&lt;/h4&gt;

&lt;p&gt;You might want a slide containing a Beamer's theme, an author name, a presentation name,... -  all of LaTex beamer's feature but written in markdown. &lt;br&gt;
To deal with that, we can add some YAML configuration at the beginning of the markdown file.\&lt;br&gt;
Fill in all the necessary fields:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;title&lt;/code&gt;: the presentation's name.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;author&lt;/code&gt;: your name.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;date&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;institute&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;theme&lt;/code&gt;: Beamer theme, you can chose one at &lt;a href="https://hartwork.org/beamer-theme-matrix/"&gt;this site&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;colortheme&lt;/code&gt;: theme colorscheme&lt;/li&gt;
&lt;li&gt;&lt;code&gt;mainfont&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;toc&lt;/code&gt;: table of content slide ( use &lt;code&gt;true&lt;/code&gt; to enable this slide)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;YAML example&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight yaml"&gt;&lt;code&gt;&lt;span class="nn"&gt;---&lt;/span&gt;
&lt;span class="na"&gt;title&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Pandoc&lt;/span&gt;&lt;span class="nv"&gt; &lt;/span&gt;&lt;span class="s"&gt;Tutorial"&lt;/span&gt;
&lt;span class="na"&gt;author&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Do Duy Huy Hoang&lt;/span&gt; 
&lt;span class="na"&gt;date&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;\today{}&lt;/span&gt;
&lt;span class="na"&gt;institute&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; 
&lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="s"&gt;The Code Cousins&lt;/span&gt;
&lt;span class="na"&gt;theme&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
&lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="s"&gt;Ilmenau&lt;/span&gt;
&lt;span class="na"&gt;colortheme&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
&lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="s"&gt;beaver&lt;/span&gt; 
&lt;span class="na"&gt;mainfont&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="s"&gt;SourceSansPro-Regular"&lt;/span&gt;
&lt;span class="na"&gt;toc&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
&lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="no"&gt;true&lt;/span&gt;
&lt;span class="nn"&gt;---&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Result&lt;/strong&gt;&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--EkRElAgw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/tuluomccxa9hdul67nx0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--EkRElAgw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/tuluomccxa9hdul67nx0.png" alt="Result with YAML header 1"&gt;&lt;/a&gt; &lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--9G5jgA6Y--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/537dqkt33ejd3wlmwt91.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--9G5jgA6Y--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/537dqkt33ejd3wlmwt91.png" alt="Result with YAML header 2"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Tips and Tricks
&lt;/h4&gt;

&lt;p&gt;&lt;strong&gt;Image Scalling&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The width and height attributes on images are treated specially. &lt;br&gt;
When used without a unit, the unit is assumed to be pixels.&lt;br&gt;
However, any of the following unit identifiers can be used: px, cm, mm, in, inch and %. &lt;br&gt;
There must not be any spaces between the number and the unit.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight markdown"&gt;&lt;code&gt;&lt;span class="p"&gt;![&lt;/span&gt;&lt;span class="nv"&gt;caption&lt;/span&gt;&lt;span class="p"&gt;](&lt;/span&gt;&lt;span class="sx"&gt;file.jpg&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;{ width=50% }
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Equal to LaTeX&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight tex"&gt;&lt;code&gt;&lt;span class="k"&gt;\includegraphics&lt;/span&gt;&lt;span class="na"&gt;[width=0.5\textwidth,height=\textheight]&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;file.jpg&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;When no width or height attributes are specified, the fallback is to look at the image resolution and the dpi metadata embedded in the image file.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Slides with Columns in Pandoc&lt;/strong&gt;&lt;br&gt;
Current version of pandoc (i.e., pandoc 2.0 and later) supports &lt;a href="https://pandoc.org/MANUAL.html#fenced-divs"&gt;fenced divs&lt;/a&gt;. &lt;br&gt;
Specially named divs are transformed into columns when targeting a slides format:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight markdown"&gt;&lt;code&gt;&lt;span class="gh"&gt;# This slide has columns&lt;/span&gt;

::: columns

:::: column
left
::::

:::: column
right
::::

:::
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;But I found that it is quite buggy and you hard to control the width of each column easily. &lt;br&gt;
Thus We can use both Markdown and LaTeX code inside our main file. &lt;br&gt;
To create a slide that has columns, I recommend to use raw LaTeX code as the following code below:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight tex"&gt;&lt;code&gt;&lt;span class="k"&gt;\Begin&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;columns&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;\Begin&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;column&lt;span class="p"&gt;}{&lt;/span&gt;0.5&lt;span class="k"&gt;\textwidth&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
- Some content here
&lt;span class="k"&gt;\End&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;column&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;\Begin&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;column&lt;span class="p"&gt;}{&lt;/span&gt;0.5&lt;span class="k"&gt;\textwidth&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
![caption](image.png)
&lt;span class="k"&gt;\End&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;column&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;\End&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;columns&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;But you need to add this code to your YAML file ( I will explain what is this code in the next section)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight yaml"&gt;&lt;code&gt;&lt;span class="na"&gt;header-includes&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
&lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="s"&gt;\newcommand{\hideFromPandoc}[1]{#1}&lt;/span&gt;
&lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="s"&gt;\hideFromPandoc{&lt;/span&gt;
    &lt;span class="s"&gt;\let\Begin\begin&lt;/span&gt;
    &lt;span class="s"&gt;\let\End\end&lt;/span&gt;
  &lt;span class="s"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Magical things&lt;/strong&gt; is that you can also use Markdown inside a Raw LaTeX code \m/&lt;/p&gt;

&lt;p&gt;And this is the result: &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--PhIZhzDZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/bh2lhm0ecd8p6127blbn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--PhIZhzDZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/bh2lhm0ecd8p6127blbn.png" alt="caption"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Preamble
&lt;/h4&gt;

&lt;p&gt;Pandoc lets user include a custom preamble in the generated output. &lt;/p&gt;

&lt;p&gt;If you have to use some packages in LaTeX ( not so much ), you can include it in the YAML header inside the &lt;code&gt;header-includes:&lt;/code&gt; tag. \&lt;br&gt;
For example I want to use package &lt;code&gt;multicol&lt;/code&gt; in LaTeX, my header should look like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight yaml"&gt;&lt;code&gt;&lt;span class="na"&gt;header-includes&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
&lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="s"&gt;\usepackage{multicol}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;These lines will be included before the document begin in LaTeX file.&lt;/p&gt;

&lt;p&gt;Preamble in Pandoc gives you more features than just to import some packages. &lt;br&gt;
We can also create our own PDF template. For presentation, we can re-config the Beamer theme. &lt;br&gt;
For example, as the previous example above, I used Ilmenau theme for my slide. &lt;br&gt;
By default, It does not have slide numbers ( frame number ). &lt;br&gt;
So our goal now is to re-config the theme without changing the theme source code.&lt;br&gt;
If you are using LaTeX then it quite easy to deal with that. &lt;br&gt;
Either does Pandoc, instead of using &lt;code&gt;header-includes&lt;/code&gt; tag, we can create a new file called &lt;code&gt;preamble.tex&lt;/code&gt; - you can put all the configuration in LaTeX to this file the same way you use LaTeX to create a beamer presentation.&lt;/p&gt;

&lt;p&gt;For example, I want to add the frame number to Ilmenau theme. &lt;br&gt;
I need to redefine the &lt;code&gt;footline&lt;/code&gt; template used by the Ilmenau, and also modify the &lt;code&gt;sections/subsections&lt;/code&gt; in toc allowing you to change the appearance of the sections and subsections in the ToC. &lt;br&gt;
At this point, you do need to know a little bit about LaTeX, but you will have your own Beamer Template. &lt;br&gt;
You can also change the color, subsection, section,...&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight tex"&gt;&lt;code&gt;&lt;span class="c"&gt;%%%% Create framenumber in footer&lt;/span&gt;
&lt;span class="k"&gt;\newcommand&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="k"&gt;\frameofframes&lt;/span&gt;&lt;span class="p"&gt;}{&lt;/span&gt;/&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="k"&gt;\newcommand&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="k"&gt;\setframeofframes&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;[1]&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="k"&gt;\renewcommand&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="k"&gt;\frameofframes&lt;/span&gt;&lt;span class="p"&gt;}{&lt;/span&gt;#1&lt;span class="p"&gt;}}&lt;/span&gt;

&lt;span class="k"&gt;\setframeofframes&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;of&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="k"&gt;\makeatletter&lt;/span&gt;
&lt;span class="k"&gt;\setbeamertemplate&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;footline&lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="c"&gt;%&lt;/span&gt;
    &lt;span class="nt"&gt;\begin{beamercolorbox}&lt;/span&gt;[colsep=1.5pt]&lt;span class="p"&gt;{&lt;/span&gt;upper separation line foot&lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="nt"&gt;\end{beamercolorbox}&lt;/span&gt;
    &lt;span class="nt"&gt;\begin{beamercolorbox}&lt;/span&gt;[ht=2.5ex,dp=1.125ex,&lt;span class="c"&gt;%&lt;/span&gt;
      leftskip=.3cm,rightskip=.3cm plus1fil]&lt;span class="p"&gt;{&lt;/span&gt;author in head/foot&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="c"&gt;%&lt;/span&gt;
      &lt;span class="k"&gt;\leavevmode&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="k"&gt;\usebeamerfont&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;author in head/foot&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="k"&gt;\insertshortauthor&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="c"&gt;%&lt;/span&gt;
      &lt;span class="k"&gt;\hfill&lt;/span&gt;&lt;span class="c"&gt;%&lt;/span&gt;
      &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="k"&gt;\usebeamerfont&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;institute in head/foot&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="k"&gt;\usebeamercolor&lt;/span&gt;&lt;span class="na"&gt;[fg]&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;institute in head/foot&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="k"&gt;\insertshortinstitute&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="c"&gt;%&lt;/span&gt;
    &lt;span class="nt"&gt;\end{beamercolorbox}&lt;/span&gt;&lt;span class="c"&gt;%&lt;/span&gt;
    &lt;span class="nt"&gt;\begin{beamercolorbox}&lt;/span&gt;[ht=2.5ex,dp=1.125ex,&lt;span class="c"&gt;%&lt;/span&gt;
      leftskip=.3cm,rightskip=.3cm plus1fil]&lt;span class="p"&gt;{&lt;/span&gt;title in head/foot&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="c"&gt;%&lt;/span&gt;
      &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="k"&gt;\usebeamerfont&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;title in head/foot&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="k"&gt;\insertshorttitle&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="c"&gt;%&lt;/span&gt;
      &lt;span class="k"&gt;\hfill&lt;/span&gt;&lt;span class="c"&gt;%&lt;/span&gt;
      &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="k"&gt;\usebeamerfont&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;frame number&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="k"&gt;\usebeamercolor&lt;/span&gt;&lt;span class="na"&gt;[fg]&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;frame number&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="k"&gt;\insertframenumber&lt;/span&gt;~&lt;span class="k"&gt;\frameofframes&lt;/span&gt;~&lt;span class="k"&gt;\inserttotalframenumber&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="nt"&gt;\end{beamercolorbox}&lt;/span&gt;&lt;span class="c"&gt;%&lt;/span&gt;
    &lt;span class="nt"&gt;\begin{beamercolorbox}&lt;/span&gt;[colsep=1.5pt]&lt;span class="p"&gt;{&lt;/span&gt;lower separation line foot&lt;span class="p"&gt;}&lt;/span&gt;  
    &lt;span class="nt"&gt;\end{beamercolorbox}&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Usage&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;pandoc main.md &lt;span class="nt"&gt;-H&lt;/span&gt; preamble.tex &lt;span class="nt"&gt;-t&lt;/span&gt; beamer &lt;span class="nt"&gt;-o&lt;/span&gt; main.pdf
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Result&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Ilmenau theme with frame number and a new look.&lt;br&gt;
You can download my preamble example &lt;a href="https://github.com/huyhoang8398/pandoc-tutorial/blob/master/preamble.tex"&gt;here&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--mFyA9BaS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/mtiyqg9uwr71vz9kkrrc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--mFyA9BaS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/mtiyqg9uwr71vz9kkrrc.png" alt="Custom Ilmenau theme"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Source code
&lt;/h2&gt;

&lt;p&gt;You can download all the source code in this blog in this &lt;a href="https://github.com/huyhoang8398/pandoc-tutorial/"&gt;site&lt;/a&gt;&lt;/p&gt;

</description>
      <category>pandoc</category>
      <category>presentation</category>
    </item>
    <item>
      <title>Using Arduino With PharoThings/Smalltalk</title>
      <dc:creator>Do Hoang</dc:creator>
      <pubDate>Tue, 03 Dec 2019 17:18:27 +0000</pubDate>
      <link>https://dev.to/huyhoang8398/using-arduino-with-pharothings-smalltalk-4blc</link>
      <guid>https://dev.to/huyhoang8398/using-arduino-with-pharothings-smalltalk-4blc</guid>
      <description>&lt;h2&gt;
  
  
  Pharothings
&lt;/h2&gt;

&lt;p&gt;Live programming platform for IoT projects based on &lt;a href="http://pharo.org"&gt;Pharo&lt;/a&gt;.&lt;br&gt;
It includes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;development tools to lively program, explore and debug remote boards (based on &lt;a href="https://github.com/dionisiydk/TelePharo"&gt;TelePharo&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;board modeling library which simplifies board configuration&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Raspberry driven by &lt;a href="http://wiringpi.com"&gt;WiringPi library&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Arduino driven by &lt;a href="https://github.com/firmata/arduino"&gt;Firmata&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Beaglebone, soon&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Now PharoThings is in beta stage together with documentation and videos. It will be improved constantly.&lt;/p&gt;

&lt;p&gt;To install Pharo/Pharothings you can read the instruction on their &lt;a href="https://github.com/pharo-iot/PharoThings"&gt;website&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Firmata
&lt;/h2&gt;

&lt;p&gt;Firmata is a generic protocol for communicating with microcontrollers from software on a host computer. &lt;br&gt;
It is intended to work with any host computer software package. Right now there is a matching object in a number of languages. &lt;br&gt;
It is easy to add objects for other software to use this protocol. &lt;br&gt;
Basically, this firmware establishes a protocol for talking to the Arduino from the host software. &lt;br&gt;
The aim is to allow people to completely control the Arduino from software on the host computer.&lt;/p&gt;
&lt;h3&gt;
  
  
  What do we need?
&lt;/h3&gt;

&lt;p&gt;In this lesson, we will use a setup with Pharo and Firmata.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Components&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;1 Arduino Uno&lt;/li&gt;
&lt;li&gt;1 Breadboard&lt;/li&gt;
&lt;li&gt;1 LED&lt;/li&gt;
&lt;li&gt;1 Resistor (330 ohms)&lt;/li&gt;
&lt;li&gt;1 Soil Moisture Sensor&lt;/li&gt;
&lt;li&gt;Jumper wires&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  Installation
&lt;/h2&gt;
&lt;h3&gt;
  
  
  Arduino: Installing Standard Firmata
&lt;/h3&gt;

&lt;p&gt;Your first step should be to download the Arduino application from &lt;br&gt;
&lt;a href="https://www.arduino.cc/en/Main/Software"&gt;&lt;em&gt;Arduino Website&lt;/em&gt;.&lt;/a&gt;&lt;br&gt;
Be sure to choose the latest version and also the correct download for your computer and operating system.&lt;br&gt;
Once the software has downloaded, you can install the application using the method appropriate for your system. &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;For &lt;code&gt;Mac OSX&lt;/code&gt;, you will be downloading a ZIP file. Double-clicking on the ZIP should produce a single "Arduino" application file  which you can then copy into your Applications folder.&lt;/li&gt;
&lt;li&gt;For &lt;code&gt;Windows&lt;/code&gt;, you should download the .EXE containing a full Windows installer. Double clicking on the .EXE should start the installation.&lt;/li&gt;
&lt;li&gt;For &lt;code&gt;Linux&lt;/code&gt;, you will download a compressed TAR file. You can use the "tar" command to uncompress and unpack the application.
Plug in Your Arduino Board as shown in Figure below.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--bZK4hbyj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/ana5tburvvi1xphdalfi.JPG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--bZK4hbyj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/ana5tburvvi1xphdalfi.JPG" alt="Arduino Connection"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt; Disconnect any wires that may be attached to your Arduino and plug the board into the computer.&lt;br&gt;
You'll need to select the entry in the &lt;code&gt;Tools &amp;gt; Board menu&lt;/code&gt; that corresponds to your Arduino board. &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Here we are using Arduino UNO board and my port is &lt;code&gt;/dev/tty.usbmodem14201&lt;/code&gt; ( You may have a different port name depend on your operating system ).&lt;/li&gt;
&lt;li&gt;Upload the Standard Firmata Sketch.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--OFM0lVxf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/0e6y6wbc37wt12lyfunh.JPG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--OFM0lVxf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/0e6y6wbc37wt12lyfunh.JPG" alt="Standard Firmata Example"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;StandardFirmata is included with the Arduino IDE. To compile and upload StandardFirmata to your Arduino, open the IDE and select &lt;code&gt;File/Examples/Firmata/StandardFirmata&lt;/code&gt;. &lt;/li&gt;
&lt;li&gt;Now at the top of the text editor window, click the &lt;code&gt;Upload&lt;/code&gt; button on the IDE.&lt;/li&gt;
&lt;li&gt;At the bottom of the text editor window, you should see a small status window. This will report the progress as the code is compiled  and then uploaded to the Arduino. &lt;/li&gt;
&lt;li&gt;While the code is being uploaded, you should see some very small LED lights (the Transmit (TX) and Receive (RX) lights) on your Arduino board blinking as the data is transferred.&lt;/li&gt;
&lt;li&gt;When the process is completed, you should see the message &lt;code&gt;Done Uploading&lt;/code&gt; in the status window at the bottom of the editor.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  Pharo with Firmata
&lt;/h2&gt;

&lt;p&gt;To load latest version of Firmata you can evaluate the following expression in playground:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight smalltalk"&gt;&lt;code&gt;  &lt;span class="nc"&gt;Metacello&lt;/span&gt; &lt;span class="nb"&gt;new&lt;/span&gt;
  &lt;span class="nf"&gt;baseline:&lt;/span&gt; &lt;span class="s"&gt;'Firmata'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nf"&gt;repository:&lt;/span&gt; &lt;span class="s"&gt;'github://pharo-iot/Firmata'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nf"&gt;load&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We have tested this library so far with Arduino Uno and Funduino Uno. &lt;br&gt;
To connect to your firmatata enable device, you need the following things:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Know the device's port name.&lt;/li&gt;
&lt;li&gt;Know its baud rate.&lt;/li&gt;
&lt;li&gt;Install firmata in it (you can do it using your arduino IDE).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For example, our Arduino boards use a baud rate of 57600, and were detected by our operating system in the /dev/ttyACM0 port. &lt;br&gt;
Connecting the Firmata client to arduino is as easy as follows:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight smalltalk"&gt;&lt;code&gt;  &lt;span class="nv"&gt;firmata&lt;/span&gt; &lt;span class="o"&gt;:=&lt;/span&gt; &lt;span class="nc"&gt;Firmata&lt;/span&gt; &lt;span class="nf"&gt;onPort:&lt;/span&gt; &lt;span class="s"&gt;'/dev/ttyACM0'&lt;/span&gt; &lt;span class="nf"&gt;baudRate:&lt;/span&gt; &lt;span class="m"&gt;57600&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Connecting to an arduino will check that the port exists, and will verify that Arduino has installed a compatible version of Firmata. &lt;br&gt;
In case one of these conditions does not hold, an exception is thrown.&lt;br&gt;
Once we are connected, we can ask the Firmata driver if it is connected or not.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight smalltalk"&gt;&lt;code&gt;  &lt;span class="nv"&gt;firmata&lt;/span&gt; &lt;span class="nf"&gt;isConnected&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And finally, we can disconnect it by doing:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight smalltalk"&gt;&lt;code&gt;  &lt;span class="nv"&gt;firmata&lt;/span&gt; &lt;span class="nf"&gt;disconnect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Digital Pins
&lt;/h2&gt;

&lt;p&gt;The &lt;code&gt;digital inputs and outputs&lt;/code&gt; (digital I/O) on the Arduino are what allow you to connect the Arduino sensors, actuators, and chips (intergrated circuit).&lt;br&gt;
For example in Arduino UNO which is a microcontroller board based on the &lt;em&gt;ATmega328&lt;/em&gt;. &lt;br&gt;
It has a few types of pins: &lt;strong&gt;digital pin&lt;/strong&gt; ( 6 can be used as PWM outputs ), &lt;strong&gt;analog pins&lt;/strong&gt; and orther pins like &lt;strong&gt;power pins&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;digital pins&lt;/code&gt; on the Arduino can be configured as either inputs or outputs. &lt;br&gt;
There are only two state, either ON or OFF state and these states are represented by the binary values 1 and 0. &lt;br&gt;
You use digital signals in situations where the input or output will have one of those two values. &lt;br&gt;
In Arduino sketch terms, a ON state is known as HIGH (5V) and OFF state is known as LOW (0V). &lt;br&gt;
In other words, we can use them to obtain a digital value (for example, if a button is pressed or not), or to set a value (set if a led is turned on or off) but not both at the same time.&lt;/p&gt;
&lt;h2&gt;
  
  
  Writing to Digital Pins
&lt;/h2&gt;

&lt;p&gt;To write to a digital pin, you should first set it to output mode using the &lt;code&gt;digitalPin:mode: message&lt;/code&gt;. &lt;br&gt;
The first argument of the message is the number of the pin, and the second is a numeric value representing the output mode value. &lt;br&gt;
We use the &lt;code&gt;FirmataConstants&lt;/code&gt; class that encapsulates many of the different numeric values used by firmata. &lt;br&gt;
In the following example, we set the digital pin 13 in output mode, so we can write to it.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight smalltalk"&gt;&lt;code&gt;  &lt;span class="nv"&gt;firmata&lt;/span&gt; &lt;span class="nf"&gt;digitalPin:&lt;/span&gt; &lt;span class="m"&gt;13&lt;/span&gt; &lt;span class="nf"&gt;mode:&lt;/span&gt; &lt;span class="nc"&gt;FirmataConstants&lt;/span&gt; &lt;span class="nf"&gt;pinModeOutput&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We can then write to a digital port with the &lt;code&gt;#digitalWrite:value: message&lt;/code&gt;, giving the pin number as first argument, and the value to write (0 or 1) as second argument. &lt;br&gt;
Thus, to turn on the pin 13 we can do:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight smalltalk"&gt;&lt;code&gt;  &lt;span class="nv"&gt;firmata&lt;/span&gt; &lt;span class="nf"&gt;digitalWrite:&lt;/span&gt; &lt;span class="m"&gt;13&lt;/span&gt; &lt;span class="nf"&gt;value:&lt;/span&gt; &lt;span class="m"&gt;1&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And to turn it off:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight smalltalk"&gt;&lt;code&gt;  &lt;span class="nv"&gt;firmata&lt;/span&gt; &lt;span class="nf"&gt;digitalWrite:&lt;/span&gt; &lt;span class="m"&gt;13&lt;/span&gt; &lt;span class="nf"&gt;value:&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You can use this method to toggle the LED as shown in Figure bellow.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--DDMkrDpA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/lxvxqhi8jqu8al840iqi.JPG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--DDMkrDpA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/lxvxqhi8jqu8al840iqi.JPG" alt="Controlling LED with Arduino via Digital pins"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Reading from Digital Pins
&lt;/h2&gt;

&lt;p&gt;To read from a digital pin, you should first set it to input mode using the &lt;code&gt;#digitalPin:mode: message&lt;/code&gt;. &lt;br&gt;
The first argument of the message is the number of the pin, and the second is a numeric value representing the input mode value. &lt;br&gt;
We use the FirmataConstants class that encapsulates many of the different numeric values used by firmata.&lt;/p&gt;

&lt;p&gt;In the following example, we first setup a push down button with a pull-down resistor.&lt;br&gt;
We connect the button output to digital pin 2.&lt;br&gt;
When we push the button and Firmata should tell us that the value of pin 2 is 1. When we do not push it, its value should be 0.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--6djGR0V2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/fd5sq96kg1oob9wgzf18.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--6djGR0V2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/fd5sq96kg1oob9wgzf18.jpg" alt="Pull-down Resistor Button Sketch"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;First, we set the digital pin 2 in input mode, so we can read from it.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight smalltalk"&gt;&lt;code&gt;  &lt;span class="nv"&gt;firmata&lt;/span&gt; &lt;span class="nf"&gt;digitalPin:&lt;/span&gt; &lt;span class="m"&gt;2&lt;/span&gt; &lt;span class="nf"&gt;mode:&lt;/span&gt; &lt;span class="nc"&gt;FirmataConstants&lt;/span&gt; &lt;span class="nf"&gt;pinModeInput&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then, we can read the value of the pin using the &lt;code&gt;#digitalRead:&lt;/code&gt; message.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight smalltalk"&gt;&lt;code&gt;  &lt;span class="nv"&gt;firmata&lt;/span&gt; &lt;span class="nf"&gt;digitalRead:&lt;/span&gt; &lt;span class="m"&gt;2&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If we ask the value and press the button at the same time, we get the value 1.&lt;/p&gt;

&lt;h2&gt;
  
  
  Analog Pins
&lt;/h2&gt;

&lt;p&gt;Analog pins are pins whose state range in the continuum between 0 and 1. These states are represented as floating point numbers.&lt;/p&gt;

&lt;p&gt;As with digital pins, analog pins work both in read and write mode. &lt;br&gt;
Typical usages of reading analog pins is retrieving data from sensors, such as temperature, humidity, light and so on. &lt;br&gt;
Writing analog pins can be used to, for example, turn on leds with a given intensity instead of just &lt;em&gt;turning on&lt;/em&gt; like we do with the digital pins.&lt;/p&gt;

&lt;h2&gt;
  
  
  Activating Analog Pins
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight smalltalk"&gt;&lt;code&gt;  &lt;span class="nv"&gt;firmata&lt;/span&gt; &lt;span class="nf"&gt;activateAnalogPin:&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Reading from Analog Pins
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight smalltalk"&gt;&lt;code&gt;  &lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nv"&gt;firmata&lt;/span&gt; &lt;span class="nf"&gt;analogRead:&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="nf"&gt;*&lt;/span&gt; &lt;span class="m"&gt;500&lt;/span&gt; &lt;span class="nf"&gt;/&lt;/span&gt; &lt;span class="m"&gt;1024&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="nf"&gt;asFloat&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Experimental procedure
&lt;/h2&gt;

&lt;p&gt;The Soil Moisture Sensor measures soil moisture grace to the changes in electrical conductivity of the earth ( soil resistance increases with drought ).&lt;br&gt;
The electrical resistance is measured between the two electrodes of the sensor.&lt;br&gt;
A comparator activates a digital output when a adjutable threshold is exceeded.&lt;br&gt;
There are a lot of moisture sensors but in our example, we use the Capacitive Soil Moisture Sensor from DFTrobot as the figure &lt;em&gt;@Capacitive-Soil-Moisture Sensor&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--wKClf079--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/kce77hcqlz8fk27fy4rb.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--wKClf079--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/kce77hcqlz8fk27fy4rb.jpg" alt="Capacitive-Soil-Moisture Sensor"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The Figure &lt;em&gt;@Capacitive-Soil-Moisture Sensor Sketch&lt;/em&gt; shows how the electric connection is made.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--UWFpZkMJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/twsx6zdyig2n4dzyx414.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--UWFpZkMJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/twsx6zdyig2n4dzyx414.png" alt="Capacitive-Soil-Moisture Sensor Sketch"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Aduino Uno&lt;/th&gt;
&lt;th&gt;Capacitive Soil Moisture Sensor&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;GND&lt;/td&gt;
&lt;td&gt;Black wire&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;5V&lt;/td&gt;
&lt;td&gt;Red Wire&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Analog output&lt;/td&gt;
&lt;td&gt;Blue Wire&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  Connecting the Firmata client to arduino
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight smalltalk"&gt;&lt;code&gt;  &lt;span class="nv"&gt;firmata&lt;/span&gt; &lt;span class="o"&gt;:=&lt;/span&gt; &lt;span class="nc"&gt;Firmata&lt;/span&gt; &lt;span class="nf"&gt;onPort:&lt;/span&gt; &lt;span class="s"&gt;'/dev/ttyACM0'&lt;/span&gt; &lt;span class="nf"&gt;baudRate:&lt;/span&gt; &lt;span class="m"&gt;57600&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Check the firmata connection
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight smalltalk"&gt;&lt;code&gt;  &lt;span class="nv"&gt;firmata&lt;/span&gt; &lt;span class="nf"&gt;isConnected&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Getting the temperature with Capacitive-Soil-Moisture Sensor
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight smalltalk"&gt;&lt;code&gt;  &lt;span class="nv"&gt;firmata&lt;/span&gt; &lt;span class="nf"&gt;activateAnalogPin:&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;
  &lt;span class="nv"&gt;firmata&lt;/span&gt; &lt;span class="nf"&gt;analogRead:&lt;/span&gt;&lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;p&gt;This is very simple and you can get these values and stored in a variable, to use to different purposes, like send a message to an LCD display, send the values to a cloud server and simply do some action.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--h5Hl2R-B--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/1j0oxhsmydze5clo12oc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--h5Hl2R-B--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/1j0oxhsmydze5clo12oc.png" alt="Capacitive-Soil-Moisture Sensor with Arduino via Firmata Result"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>pharothings</category>
      <category>smalltalk</category>
      <category>arduino</category>
      <category>iot</category>
    </item>
    <item>
      <title>Git Revert to a Good Commit</title>
      <dc:creator>Do Hoang</dc:creator>
      <pubDate>Mon, 02 Dec 2019 17:18:24 +0000</pubDate>
      <link>https://dev.to/huyhoang8398/git-revert-to-a-good-commit-3376</link>
      <guid>https://dev.to/huyhoang8398/git-revert-to-a-good-commit-3376</guid>
      <description>&lt;p&gt;&lt;em&gt;This post was originally published on &lt;a href="https://dohoang.me/posts/git-revert-to-a-good-commit/"&gt;my blog&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Today my co-worker asked me how to revert to an old and good commit on master ( after you accidentally merged &lt;code&gt;dev branch&lt;/code&gt; to &lt;code&gt;master&lt;/code&gt; ).&lt;br&gt;
There are many ways to do that, for example we can use &lt;code&gt;reset&lt;/code&gt; to discard all wrong commit to revert back, like &lt;code&gt;undo&lt;/code&gt; when writing text. &lt;br&gt;
You can find others way on&lt;a href="https://stackoverflow.com/questions/4114095/how-do-i-revert-a-git-repository-to-a-previous-commit"&gt;&lt;code&gt;this topic on Stack Overflow&lt;/code&gt;&lt;/a&gt;&lt;br&gt;
But the problem is too many options, we dont know which one is good, or even dont need to understand - it just works.&lt;/p&gt;

&lt;p&gt;So i will introduce you my traditional way and extremely accurate.&lt;/p&gt;

&lt;p&gt;First of all, after you did a &lt;code&gt;commit&lt;/code&gt; and &lt;code&gt;merge&lt;/code&gt; you should not delete commit with &lt;code&gt;git reset&lt;/code&gt; (Undo) thus we want to repair it instead of delete it.&lt;/p&gt;

&lt;p&gt;Next, in general, between any two &lt;code&gt;commit&lt;/code&gt; in you git repository is a different line of codes, which you can always see wit the git &lt;code&gt;diff&lt;/code&gt; command. &lt;br&gt;
Revert an old commit is to delete these different.&lt;/p&gt;

&lt;p&gt;Suppose we are in &lt;code&gt;master&lt;/code&gt; branch and we want to revert back to commit &lt;code&gt;8398e5b&lt;/code&gt;. &lt;br&gt;
So you first need to &lt;code&gt;clone/checkout&lt;/code&gt; &lt;em&gt;master&lt;/em&gt; branch to a new clean folder ( the directory where you type &lt;code&gt;git status -u&lt;/code&gt; and you see nothing there.)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;git status &lt;span class="nt"&gt;-u&lt;/span&gt;           &lt;span class="c"&gt;# make sure it is clean&lt;/span&gt;
&lt;span class="nv"&gt;$ &lt;/span&gt;git checkout master     &lt;span class="c"&gt;# be sure you are in master&lt;/span&gt;
&lt;span class="nv"&gt;$ &lt;/span&gt;git diff HEAD..8398e5b  &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; patch.diff
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;In the last command, the order is very important.&lt;br&gt;
The &lt;code&gt;commit&lt;/code&gt; we want to revert to must be in the end. &lt;br&gt;
Then you apply this diff&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;patch &lt;span class="nt"&gt;-p1&lt;/span&gt; &amp;lt; patch.diff
&lt;span class="nv"&gt;$ &lt;/span&gt;git status &lt;span class="nt"&gt;-u&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Check if any new files have not been commited in the result of &lt;code&gt;git status -u&lt;/code&gt; above, these are the files included in the old commit &lt;strong&gt;8398e5b&lt;/strong&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;git add some/new/files.txt
&lt;span class="nv"&gt;$ &lt;/span&gt;git commit &lt;span class="nt"&gt;-m&lt;/span&gt; &lt;span class="s2"&gt;"Revert to 8398e5b, thanks to @kn"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;To be sure, check the results:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;git diff 8398e5b..
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;This time it should appear ... nothing, that is, you have completely restored your old commit. 🎉🎉🎉&lt;/p&gt;

&lt;p&gt;This way is always successful, simple, you can even take advantage of a few things to adjust. &lt;br&gt;
And above all, instead of having to understand a bunch of commands like &lt;code&gt;git revert&lt;/code&gt;, &lt;code&gt;git reset&lt;/code&gt;,... you just focus on understanding the problem of &lt;strong&gt;diff, diff, and diff&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>git</category>
      <category>github</category>
      <category>terminal</category>
    </item>
  </channel>
</rss>
