<?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: Palash Bauri 👻</title>
    <description>The latest articles on DEV Community by Palash Bauri 👻 (@bauripalash).</description>
    <link>https://dev.to/bauripalash</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%2F93311%2F6a5a7b9c-a043-43a6-8333-e9959908a367.png</url>
      <title>DEV Community: Palash Bauri 👻</title>
      <link>https://dev.to/bauripalash</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/bauripalash"/>
    <language>en</language>
    <item>
      <title>I Designed a Language Which Let's You Program in Cats' Language</title>
      <dc:creator>Palash Bauri 👻</dc:creator>
      <pubDate>Sat, 11 Jul 2020 13:57:26 +0000</pubDate>
      <link>https://dev.to/bauripalash/i-designed-a-language-which-let-s-you-program-in-cats-language-1b1l</link>
      <guid>https://dev.to/bauripalash/i-designed-a-language-which-let-s-you-program-in-cats-language-1b1l</guid>
      <description>&lt;p&gt;Computer Programming can be hard , can be complex to understand for some people, but that doesn’t mean that they can’t be fun. From the beginning , programming languages were in English , well most of them except some special languages. But I have designed a programming language which let’s people program in Cats’ language, Mew Mew Mew. Which despite being a esoteric language is very much usable , and let’s programmers create complex program. &lt;/p&gt;

&lt;h3&gt;
  
  
  🎉 Say Hello to MewMew
&lt;/h3&gt;

&lt;p&gt;Programming in Cats’ language , it is lunacy or what? But it’s reality. With MewMew one can program in cats’ language, but it is not actually the cats’ language but the human interpretation of cats’ language , mew mew mew.&lt;/p&gt;

&lt;p&gt;MewMew is an esoteric programming language built with ANTLR4 and C++. It is not intended to be used for commercial or mainstream programming instead , it was designed to be learning project for me. While majority of programming languages are in English or I should say human languages but this language intends to be one of the first language to be in ‘non-human’ (not technically) language.&lt;/p&gt;

&lt;p&gt;MewMew is implemented using ANTLR4 and C++. Though using Dynamically typed host language would be given me more flexibilty designing the language, I chose to use a statically typed for a multiple reasons , First it is fast. Second , the language becomes much more runtime safe. When experimenting with early prototypes , I tried Python and PLY (Python Lex and Yacc) , Tatsu and even Flex &amp;amp; Bison. Python and PLY was not chosen because it was too much slow , even Cythonzing didn’t give advantage. Tatsu was kind of better than PLY but again speed issue, and Flex &amp;amp; Bison , I didn’t chose them because of their over complexity , a language small as MewMew required a huge codebase. Finally I setteled for ANTLR4 , It was comparativaly fast thanks to its ALL(*) algorithm , on top of that the API of it was very easy to catch on but also very robust.&lt;/p&gt;

&lt;p&gt;When Designing MewMew , I left some places which can be used to improve or extend the language in future.&lt;/p&gt;

&lt;p&gt;MewMew doesn’t use any traditional numbers (0 to 9) instead it uses ‘mew’s. For example , &lt;code&gt;mew&lt;/code&gt; will get converted to 1 , &lt;code&gt;mewme&lt;/code&gt; will get converted to 2  , &lt;code&gt;mewmewmewmewmewmewmewmewmewmew&lt;/code&gt; will get converted to 10 and so on so forth but zero has special case , to get only zero one can use ‘mew-mew’.&lt;/p&gt;

&lt;p&gt;MewMew also has few operator similar to C++, which are discussed in GitHub project repository README. MewMew is all about numbers, it doesn’t contain any other types such as strings , chars , arrays etc , which keeps the language lightweight. Every number in mewmew is a floating point number.&lt;/p&gt;

&lt;p&gt;MewMew also has if , if else and a repeat loop aka. Meow loop expression. It also has a special type of function called scratch function which open the door of extending the language in future. Syntax of if statement is something like &lt;code&gt;Expression ? Statements ;&lt;/code&gt; where &lt;code&gt;Expression&lt;/code&gt; takes any type of expression , on Truthy value the ‘Statements’ will get executed. Similar to that &lt;code&gt;Expression ? Statements1 : Statements2 ;&lt;/code&gt; is the syntax of if-else statement, if the value of &lt;code&gt;Expression&lt;/code&gt; is truthy the &lt;code&gt;Statements1&lt;/code&gt;  will get executed else &lt;code&gt;Statement2&lt;/code&gt; will get executed. The syntax of meow loop is something like this &lt;code&gt;@ Expression : Statements;&lt;/code&gt; the &lt;code&gt;Statements&lt;/code&gt; will get executed N times where N = Expression. Scratch function syntax is something like &lt;code&gt;#(Expression)&lt;/code&gt; where ‘#’ can be repeated from 1 to many times. But as of 5 functions are defined only.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Here’s a comparison of some simple program written in MewMew and C++ :&lt;/strong&gt; &lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;In MewMew&lt;/th&gt;
&lt;th&gt;In C++&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;m=mew;&lt;br&gt;@#####(mew):&lt;br&gt;    m % mewmew == mew – mew ? &lt;br&gt;        ::m;&lt;br&gt;    ;&lt;br&gt;    m = m + mew;&lt;br&gt;;&lt;/td&gt;
&lt;td&gt;#include &lt;br&gt;using namespace std;&lt;br&gt;&lt;br&gt;int main()&lt;br&gt;{&lt;br&gt;    for(int m = 1; m &amp;lt;= 100 ; ++m){&lt;br&gt;        if (m%2 == 0){&lt;br&gt;            cout &amp;lt;&amp;lt; m &amp;lt;&amp;lt; endl;&lt;br&gt;        }&lt;br&gt;    }&lt;br&gt;}&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;m=mew;&lt;br&gt;@####(mew):&lt;br&gt;    m % mewmewmew == mew – mew &amp;amp; m % ###(mew) == mew – mew ? &lt;br&gt;        ::m;&lt;br&gt;    ;&lt;br&gt;    m = m + mew;&lt;br&gt;;&lt;/td&gt;
&lt;td&gt;#include &lt;br&gt;using namespace std;&lt;br&gt;&lt;br&gt;int main()&lt;br&gt;{&lt;br&gt;    for(int m = 1; m &amp;lt;= 100 ; ++m){&lt;br&gt;        if (m%3 == 0 &amp;amp;&amp;amp; m%5==0){&lt;br&gt;            cout &amp;lt;&amp;lt; m &amp;lt;&amp;lt; endl;&lt;br&gt;        }&lt;br&gt;    }&lt;br&gt;}&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h3&gt;
  
  
  CONCLUSION &amp;amp; FUTURE WORK
&lt;/h3&gt;

&lt;p&gt;MewMew is an esoteric language which is more like a joke than a commercial language. It was created to be a leaning project for which it has done successfully. In future it also might work as an reference to learning language designing for future.&lt;/p&gt;

&lt;p&gt;With the scratch function it opens new doors for expanding the language in future. It will only took a few lines of code in switch...case statement to add a new function.&lt;/p&gt;

&lt;h3&gt;
  
  
  GITHUB &amp;amp; DOCUMENTATION
&lt;/h3&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--566lAguM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/bauripalash"&gt;
        bauripalash
      &lt;/a&gt; / &lt;a href="https://github.com/bauripalash/mewmew"&gt;
        mewmew
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      /ᐠ｡ꞈ｡ᐟ\ MewMew Programming Language - Program in Cats' Language
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;p&gt;&lt;a rel="noopener noreferrer" href="https://github.com/bauripalash/mewmew./media/Banner.png"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--DABMEsIF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/bauripalash/mewmew./media/Banner.png" alt="/ᐠ｡ꞈ｡ᐟ\ MewMew Programming Language"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
MewMew is &lt;strong&gt;dead&lt;/strong&gt;. Checkout &lt;a href="https://github.com/bauripalash/mewl"&gt;Mewl, program in cats' language&lt;/a&gt;
&lt;/h2&gt;
&lt;p&gt;&lt;a href="http://makeapullrequest.com" rel="nofollow"&gt;&lt;img src="https://camo.githubusercontent.com/0ff11ed110cfa69f703ef0dcca3cee6141c0a8ef465e8237221ae245de3deb3d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5052732d77656c636f6d652d627269676874677265656e2e7376673f7374796c653d666c61742d737175617265" alt="."&gt;&lt;/a&gt;
&lt;a href="https://www.firsttimersonly.com/" rel="nofollow"&gt;&lt;img src="https://camo.githubusercontent.com/f851e60b057d359904a79fa5ea818c4b7acd4f78710b0ed28ea964cb7f00b72b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f66697273742d2d74696d6572732d2d6f6e6c792d667269656e646c792d626c75652e7376673f7374796c653d666c61742d737175617265" alt="."&gt;&lt;/a&gt;
&lt;a rel="noopener noreferrer" href="https://github.com/bauripalash/mewmew/workflows/C/C++%20CI/badge.svg"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--RhZp_Ol5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/bauripalash/mewmew/workflows/C/C%2B%2B%2520CI/badge.svg" alt="C/C++ CI"&gt;&lt;/a&gt;
&lt;a href="https://github.com/bauripalash/mewmew/releases"&gt;&lt;img src="https://camo.githubusercontent.com/8619b2c652b3e31de9bef003c9a93fd2b02da290bdee6954901baecc556f1bf1/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f56657273696f6e2d302e322e626574612d626c7565" alt="Version 0.2b"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Give a Star 🌟 to this project to support this project&lt;/strong&gt;&lt;/p&gt;
&lt;h4&gt;
/ᐠ｡ꞈ｡ᐟ\ MewMew 🐱 is an Esoteric &lt;code&gt;Just for Fun&lt;/code&gt; programming language. You can program in cats' language with MewMew. Have Fun!&lt;/h4&gt;
&lt;h2&gt;
🎉 Get Started&lt;/h2&gt;
&lt;h4&gt;
😸 Integers&lt;/h4&gt;
&lt;p&gt;There's no concept of numbers (eg. 1 2 3 4 100) in MewMew, instead we use &lt;code&gt;mew&lt;/code&gt;s. 1 &lt;code&gt;mew&lt;/code&gt; is equal to 1 , therefor &lt;code&gt;mewmew&lt;/code&gt; = 2 , &lt;code&gt;mewmewmew&lt;/code&gt; = 3 , &lt;code&gt;mewmewmewmewmewmewmewmewmewmew&lt;/code&gt; = 10 and &lt;code&gt;mew-mew&lt;/code&gt; = 0. (You got the Idea, right)&lt;/p&gt;
&lt;h4&gt;
😸 Operators&lt;/h4&gt;
&lt;p&gt;&lt;strong&gt;MewMew supports a few types of operators =&amp;gt;&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;+&lt;/code&gt; -&amp;gt; Addition&lt;/li&gt;
&lt;/ul&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;-&lt;/code&gt; -&amp;gt; Subtraction&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;*&lt;/code&gt; -&amp;gt; Multiplication&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;/&lt;/code&gt; -&amp;gt; Division&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;**&lt;/code&gt; -&amp;gt; Power&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;~&lt;/code&gt; -&amp;gt; Absolute Value&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;-&lt;/code&gt; -&amp;gt; Unary Minus&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;gt;&lt;/code&gt; -&amp;gt; Greater than&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;gt;=&lt;/code&gt; -&amp;gt; Greater than equal to&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;&lt;/code&gt; -&amp;gt; Less than&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;=&lt;/code&gt; -&amp;gt; Less than equal to&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;==&lt;/code&gt; -&amp;gt; Is Equal…&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/bauripalash/mewmew"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;


</description>
      <category>showdev</category>
      <category>opensource</category>
      <category>cpp</category>
      <category>computerscience</category>
    </item>
    <item>
      <title>Learn Python 3 from One Picture!</title>
      <dc:creator>Palash Bauri 👻</dc:creator>
      <pubDate>Wed, 26 Feb 2020 07:15:08 +0000</pubDate>
      <link>https://dev.to/bauripalash/learn-python-3-from-one-picture-4lfi</link>
      <guid>https://dev.to/bauripalash/learn-python-3-from-one-picture-4lfi</guid>
      <description>&lt;p&gt;&lt;strong&gt;Source :&lt;/strong&gt; &lt;a href="https://github.com/coodict/python3-in-one-pic/blob/master/py3%20in%20one%20pic.png"&gt;Github: coodict/python3-in-one-pic&lt;/a&gt;&lt;br&gt;
&lt;a href="https://i.imgur.com/nDPI4Xs.png"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--mSBf_gBp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/nDPI4Xs.png" alt="Image"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>python</category>
      <category>beginners</category>
      <category>githunt</category>
    </item>
    <item>
      <title>Let's Create a Toy Markdown Editor with Python Tkinter!</title>
      <dc:creator>Palash Bauri 👻</dc:creator>
      <pubDate>Thu, 09 Jan 2020 12:21:19 +0000</pubDate>
      <link>https://dev.to/bauripalash/let-s-create-a-toy-markdown-editor-with-python-tkinter-13nk</link>
      <guid>https://dev.to/bauripalash/let-s-create-a-toy-markdown-editor-with-python-tkinter-13nk</guid>
      <description>&lt;p&gt;Markdown Editor are one of the trending things nowadays. Everybody is creating a markdown editor, some of them are innovative but some of them are boring. In the meantime, I always been a fan of doing things which won't be done by others. (I will explain why other don't want to build markdown editor with Tkinter)&lt;/p&gt;

&lt;p&gt;If you already are familiar with Python and Tkinter you can easily get into this guide.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;But If you are just starting out with Python and/or Tkinter, you can check out these :&lt;/em&gt; &lt;strong&gt;Python Tutorials:&lt;/strong&gt; &lt;a href="https://www.freecodecamp.org/news/best-python-tutorial/"&gt;FreeCodeCamp Python Tutorial&lt;/a&gt; , &lt;a href="https://www.youtube.com/playlist?list=PLQVvvaa0QuDeAams7fkdcwOGBpGdHpXln"&gt;Python 3 Playlist by sentdex&lt;/a&gt; , &lt;a href="https://www.youtube.com/watch?v=rfscVS0vtbw"&gt;FreeCodeCamp Python for Beginners&lt;/a&gt; etc. (More can be found one google away)&lt;br&gt;
&lt;strong&gt;Tkinter Tutorials:&lt;/strong&gt; &lt;a href="https://pythonprogramming.net/python-3-tkinter-basics-tutorial/"&gt;Tkinter Basics&lt;/a&gt; , &lt;a href="https://www.youtube.com/watch?v=YXPyB4XeYLA"&gt;FreeCodeCamp Tkinter Course&lt;/a&gt; , &lt;a href="https://www.youtube.com/playlist?list=PL6gx4Cwl9DGBwibXFtPtflztSNPGuIB_d"&gt;TheNewBoston Tkinter Playlist&lt;/a&gt; etc. (More can be found one google away)&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;So, before we start, I want to explain why people don't want to build markdown editors with tkinter. Because there's no default easy way to display html output of the markdown input. There's not even a default tkinter widget to display html data. You can just simply write/edit markdown but there's no easy way to display the output inside your application.&lt;/p&gt;

&lt;p&gt;But one day, while I was roaming the streets of Internet I found Something Interesting , &lt;a href="https://github.com/paolo-gurisatti/tk_html_widgets"&gt;&lt;strong&gt;tk_html_widgets&lt;/strong&gt;&lt;/a&gt; which can display html output! But ofcourse it did have some problems: the fonts were too small, and had no support for attaching remote photos. So as usual I created my own fork and fixed some issues and kinda improved the stability and named it : &lt;a href="https://github.com/bauripalash/tkhtmlview/"&gt;tkhtmlview&lt;/a&gt;. 😎&lt;/p&gt;

&lt;p&gt;Ugh, I think I'm boring you 😅, so let's stop talking and start building.&lt;/p&gt;

&lt;h4&gt;
  
  
  🛠️ Start Building:
&lt;/h4&gt;

&lt;p&gt;First make sure you have Python 3 and Tkinter installed, if not you can download them from here &lt;a href="https://www.python.org/downloads"&gt;python.org/downloads&lt;/a&gt; (Tkinter is already packed with Python).&lt;/p&gt;

&lt;p&gt;Other Things we will need are &lt;strong&gt;tkhtmlview&lt;/strong&gt; and &lt;strong&gt;markdown2&lt;/strong&gt;. You can install them by running &lt;code&gt;pip install tkhtmlview markdown2&lt;/code&gt; or &lt;code&gt;pip3 install tkhtmlview markdown2&lt;/code&gt; (If you have multiple versions of Python)&lt;/p&gt;

&lt;p&gt;Now fire up your favorite editor or IDE and create a new file (eg. &lt;code&gt;tdown.py&lt;/code&gt; (I named the editor &lt;em&gt;tdown&lt;/em&gt;)).&lt;/p&gt;

&lt;p&gt;We will start by importing necessary libraries.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="nn"&gt;tkinter&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;
&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="nn"&gt;tkinter&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;font&lt;/span&gt; &lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;filedialog&lt;/span&gt;
&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="nn"&gt;markdown2&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;Markdown&lt;/span&gt;
&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="nn"&gt;tkhtmlview&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;HTMLLabel&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In the first line we import everything (almost) from tkinter package.&lt;br&gt;
In the second line we import font and filedialog. &lt;code&gt;font&lt;/code&gt; is needed to style (eg. Font , Font Size) our input field, and filedialog is imported to open files markdown files for editing and/or save our markdown file.&lt;br&gt;
in 3rd line, Markdown is imported to help us convert our markdown source to html and display on output field using HTMLLabel which we import on 4th line.&lt;/p&gt;

&lt;p&gt;After that, we will create a frame class called Window which will be inherited from tkinters's &lt;strong&gt;Frame&lt;/strong&gt; class and hold our input and output fields.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;
&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Window&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;Frame&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;__init__&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;master&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="bp"&gt;None&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
        &lt;span class="n"&gt;Frame&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;__init__&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;master&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;master&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;master&lt;/span&gt;
        &lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;myfont&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;font&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Font&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;family&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"Helvetica"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;size&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;14&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;init_window&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;

    &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;init_window&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
        &lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;master&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;title&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"TDOWN"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;pack&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;fill&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;BOTH&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;expand&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&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;Here in this codeblock, we first define a class called Window which inherits tkinter's Frame widget class. Now in the initialization function we take master as a argument which will serve as the parent of the frame, in the next line we initialize a Frame. Next we declare a custom font object called &lt;code&gt;self.myfont&lt;/code&gt; with font family of &lt;strong&gt;Helvetica&lt;/strong&gt; (You can choose any font family you want) and size of &lt;em&gt;14&lt;/em&gt; which will be used in our markdown input field, finally we call the &lt;em&gt;init_window&lt;/em&gt; function where we will put the heart of our application.&lt;/p&gt;

&lt;p&gt;In the &lt;em&gt;init_window&lt;/em&gt; function we first set the title of the window as &lt;strong&gt;TDOWN&lt;/strong&gt; and in the next line &lt;code&gt;self.pack(fill=BOTH, expand=1)&lt;/code&gt; , we tell your Frame to take the full space of our window. We set &lt;code&gt;fill&lt;/code&gt; keyword argument to &lt;code&gt;BOTH&lt;/code&gt; which is actually being import from tkinter library. It tells the frame to fill the window both horizontally and vertically , and the &lt;code&gt;expand&lt;/code&gt; keyword argument is set to 1 (signifies &lt;strong&gt;True&lt;/strong&gt;) and tells our Frame to be expandable , in simple terms the Frame will be filling the window no matter if we stretch the window size , or maximize it.&lt;/p&gt;

&lt;p&gt;Now if you run the &lt;code&gt;tdown.py&lt;/code&gt; script you'll not see anything , because we have only defined the class but never called it.&lt;br&gt;
To fix this we are gonna put this at the end of our script&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="n"&gt;root&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;Tk&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="n"&gt;root&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;geometry&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"700x600"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="n"&gt;app&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;Window&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;root&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="n"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;mainloop&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here we create a Tk object and store it in root variable which will serve as the root of our Window class. Next we set the geometry of our window to 700x600, 700 is height and 600 is width of the window. In the next line you can see , we are creating a Window object, pushing &lt;strong&gt;root&lt;/strong&gt; variable as &lt;em&gt;root&lt;/em&gt; of the frame and storing it in a variable called &lt;strong&gt;app&lt;/strong&gt;. Next thing we do is just call the mainloop function which tells our app to run! 😊&lt;/p&gt;

&lt;p&gt;Now run the &lt;code&gt;tdown.py&lt;/code&gt; script! You will see a blank window like this if you did everything correctly:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--NXw7VtO9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/w2cmd4lkqz2ag1u4cimk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--NXw7VtO9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/w2cmd4lkqz2ag1u4cimk.png" alt="Blank Tkinter Frame" width="707" height="638"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;But it's just a blank window, to write something on the window we need add Text Field where will write our markdown. To do that we are gonna use &lt;strong&gt;Text&lt;/strong&gt; widget from tkinter.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="p"&gt;...&lt;/span&gt;
&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;init_window&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;master&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;title&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"TDOWN"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;pack&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;fill&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;BOTH&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;expand&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;inputeditor&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;Text&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;width&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"1"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;inputeditor&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;pack&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;fill&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;BOTH&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;expand&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;side&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;LEFT&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Don't get confused with the &lt;strong&gt;...&lt;/strong&gt; (three dots) , I put them there only to signify that there are multiple lines of code before this code block.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Here we create a Text widget with width of &lt;strong&gt;1&lt;/strong&gt;. Don't scratch your head, here sizings are done using ratios. You'll understand it more clearly in next few seconds when we will put the output box. 😁&lt;br&gt;
We then pack it into the Frame and tell it to be both Horizontally and Vertically stretchable.&lt;/p&gt;

&lt;p&gt;When you run the script, you'll see a Multiline Input Field has taken over our whole &lt;del&gt;World&lt;/del&gt; Window. If you start writing in it, you may notice that the characters are so tiny!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--mjMu760X--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/5lk52zviyi1up2x9by9o.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--mjMu760X--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/5lk52zviyi1up2x9by9o.png" alt="Input Field Has Taken Over the Whole Window!" width="715" height="639"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I already knew this problem will arise, that's why I told you earlier to create a custom font object (&lt;em&gt;self.myfont&lt;/em&gt;), now if you do something like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;
&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;inputeditor&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;Text&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;width&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"1"&lt;/span&gt; &lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;font&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;myfont&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;(Here, we tell our Text widget to use our custom font instead of the default tiny one!)&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Font size of the input field will be increased to 14. Run the script to check if everything worked perfectly!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ZZXc-PY1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/aomeb6p7ja212e64co56.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ZZXc-PY1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/aomeb6p7ja212e64co56.png" alt="Font Size has been increased to 14" width="712" height="178"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now, I think it's time to add the outputbox where we will see the html output of our markdown source while we write.&lt;br&gt;
To do that we are gonna add a HTMLLabel something like this inside &lt;code&gt;init_window&lt;/code&gt; function:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;outputbox&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;HTMLLabel&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;width&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"1"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;background&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"white"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;html&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"&amp;lt;h1&amp;gt;Welcome&amp;lt;/h1&amp;gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;outputbox&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;pack&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;fill&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;BOTH&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;expand&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;side&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;RIGHT&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;outputbox&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;fit_height&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We use &lt;code&gt;HTMLLabel&lt;/code&gt; from &lt;em&gt;tkhtmlview&lt;/em&gt; with width of &lt;strong&gt;1&lt;/strong&gt; (again) , we set the width to 1 because the window will be shared between Input Field and Output Box with ratio of &lt;strong&gt;1:1&lt;/strong&gt; (You'll understand what I mean when you'll run the script).&lt;br&gt;
&lt;code&gt;html&lt;/code&gt; keyword argument stores the value which will be shown on first time. &lt;br&gt;
Then we pack it in the window with &lt;code&gt;side&lt;/code&gt; as &lt;code&gt;RIGHT&lt;/code&gt; to put this in right side of the Input Field.&lt;br&gt;
and the &lt;code&gt;fit_height()&lt;/code&gt; makes the texts fit inside the widget (As far as I think 😁)&lt;/p&gt;

&lt;p&gt;Run the code.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--AvL7v9MQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/emdqws7pfiudvw7ltoo9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--AvL7v9MQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/emdqws7pfiudvw7ltoo9.png" alt="Output Box Added!" width="698" height="143"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now if you start writing in the input field. you may be disappointed (Don't be!) to see that the output is not getting updated as we type in, because we have not told your program to do so.&lt;/p&gt;

&lt;p&gt;To do that we are gonna first bind a event with our editor, whenever the text is modified , the output will be updated, something like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;inputeditor&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;bind&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"&amp;lt;&amp;lt;Modified&amp;gt;&amp;gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;onInputChange&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Put that line inside the init_window() function&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;So basically that line tells the &lt;code&gt;inputeditor&lt;/code&gt; to call the &lt;code&gt;onInputChange&lt;/code&gt; function whenever the text is changed. But as we don't have that function yet, we are gonna write it.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="p"&gt;...&lt;/span&gt;
&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;onInputChange&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="bp"&gt;self&lt;/span&gt; &lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;event&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;inputeditor&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;edit_modified&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;md2html&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;Markdown&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
    &lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;outputbox&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;set_html&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;md2html&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;convert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;inputeditor&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"1.0"&lt;/span&gt; &lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;END&lt;/span&gt;&lt;span class="p"&gt;)))&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In the first line using &lt;code&gt;edit_modified(0)&lt;/code&gt; we reset the Modified flag so that it can be reused otherwise after the first event call it will not work anymore.&lt;br&gt;
Next we create a Markdown object named md2html and on the last line, where first we.... wait! the last line maybe confusing for some readers. So let me it break it down into three lines.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="n"&gt;markdownText&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;inputeditor&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"1.0"&lt;/span&gt; &lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;END&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="n"&gt;html&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;md2html&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;convert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;markdownText&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;outputbox&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;set_html&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;html&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here in the first line we fetch the markdown text from top to bottom of the input field. First argument of &lt;code&gt;self.inputeditor.get&lt;/code&gt; tell to start scanning from the first line's 0th character (1.0 =&amp;gt; [LINE_NUMBER].[CHARACTER_NUMBER]) , and the last argument tells to stop scanning when reached end.&lt;/p&gt;

&lt;p&gt;Then we convert the scanned markdown text to html using &lt;code&gt;md2html.convert()&lt;/code&gt; function and store it in &lt;code&gt;html&lt;/code&gt; variable.&lt;/p&gt;

&lt;p&gt;Finally we tell outputbox to display the output using the &lt;code&gt;.set_html()&lt;/code&gt; function!&lt;/p&gt;

&lt;p&gt;Run the script! You will see a functioning (almost) markdown editor. As you type in the input field, the output will also be updated!&lt;/p&gt;

&lt;p&gt;But... Our Work is not yet finished. Users need to atleast open and save their texts.&lt;/p&gt;

&lt;p&gt;To do that, we are gonna add a &lt;code&gt;File&lt;/code&gt; menu in the menubar , where users will be able to Open and Save Files as well as Quit from the application!&lt;/p&gt;

&lt;p&gt;In the &lt;code&gt;init_window&lt;/code&gt; function we will add these:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;mainmenu&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;Menu&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;filemenu&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;Menu&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;mainmenu&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;filemenu&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;add_command&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;label&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"Open"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;command&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;openfile&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;filemenu&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;add_command&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;label&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"Save as"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;command&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;savefile&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;filemenu&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;add_separator&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;filemenu&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;add_command&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;label&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"Exit"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;command&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;quit&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;mainmenu&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;add_cascade&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;label&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"File"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;menu&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;filemenu&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;master&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;config&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;menu&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;mainmenu&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;I'll make this quick. Here we define a new Menu with Frame as its parent. Next, We define another Menu and previous menu as its parent. It will serve as our &lt;code&gt;File&lt;/code&gt; menu. Then we add 3 sub menus (Open , Save as , Exit) and a separator using the &lt;code&gt;add_command()&lt;/code&gt; and &lt;code&gt;add_separator()&lt;/code&gt; functions. The &lt;strong&gt;Open&lt;/strong&gt; sub-menu will execute the &lt;code&gt;openfile&lt;/code&gt; function , the &lt;strong&gt;Save as&lt;/strong&gt; sub-menu will execute &lt;code&gt;savefile&lt;/code&gt; function. and finally the &lt;strong&gt;Exit&lt;/strong&gt; will execute a builtin function &lt;code&gt;quit&lt;/code&gt; which will close the program.&lt;/p&gt;

&lt;p&gt;Then using the &lt;code&gt;add_cascade()&lt;/code&gt; function we tell the first Menu object to include the &lt;code&gt;filemenu&lt;/code&gt; variable which includes all our sub-menus with the label &lt;code&gt;File&lt;/code&gt;. At last we use &lt;code&gt;self.master.config()&lt;/code&gt; to tell our window to use &lt;code&gt;mainmenu&lt;/code&gt; as our window's menubar.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--3OtXXZ96--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/geyhpbgqwkhmthh09dbi.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--3OtXXZ96--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/geyhpbgqwkhmthh09dbi.png" alt="Menu Added" width="706" height="181"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;It will look something like this, but don't yet run it. You'll get errors saying &lt;code&gt;openfile&lt;/code&gt; &amp;amp; &lt;code&gt;savefile&lt;/code&gt; functions aren't defined!&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;As you can understand now, we have to define two functions inside Window class , where we will use tkinter's filedialog.&lt;/p&gt;

&lt;p&gt;First Let's define the function to open files&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;openfile&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="n"&gt;openfilename&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;filedialog&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;askopenfilename&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;filetypes&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="s"&gt;"Markdown File"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s"&gt;"*.md , *.mdown , *.markdown"&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
                                                                  &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Text File"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s"&gt;"*.txt"&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; 
                                                                  &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"All Files"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s"&gt;"*.*"&lt;/span&gt;&lt;span class="p"&gt;)))&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;openfilename&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="k"&gt;try&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
            &lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;inputeditor&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;delete&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mf"&gt;1.0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;END&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
            &lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;inputeditor&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;insert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;END&lt;/span&gt; &lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nb"&gt;open&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;openfilename&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="n"&gt;read&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;
        &lt;span class="k"&gt;except&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
            &lt;span class="k"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Cannot Open File!"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;     
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here, at first we show the user a file browser dialog to choose a file to open using &lt;code&gt;filedialog.askopenfilename()&lt;/code&gt;. With &lt;code&gt;filetypes&lt;/code&gt; keyword argument we tell the dialog to only open these types of files by passing a tuple with supported files (basically all types of file) : Markdown files with &lt;code&gt;.md&lt;/code&gt; , &lt;code&gt;.mdown&lt;/code&gt; , &lt;code&gt;.markdown&lt;/code&gt; extensions, Text Files with &lt;code&gt;.txt&lt;/code&gt; extension, and in the next row using a wildcard extension, we tell the dialog to open files with any extension. &lt;/p&gt;

&lt;p&gt;Then we check if user has selected a file or not , if yes, we try to open the file. Then we delete all the text inside the input field from first line's 0th character to the END of the field, next we open and read the content of the selected file and insert the contents in the input field.&lt;br&gt;
If our program can't open a file it will print out the error. But wait , that's not a good way to handle errors, we can do here is show an Error Message to the user something like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--6DN0iIv0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/oyq79guh9o4x6c3p9oln.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--6DN0iIv0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/oyq79guh9o4x6c3p9oln.png" alt="Showing an Error Message" width="703" height="193"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;To do that, we are gonna first import &lt;code&gt;messagebox&lt;/code&gt; from tkinter  package.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="nn"&gt;tkinter&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;messagebox&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="n"&gt;mbox&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;then instead of just printing a error message like we did above, we're gonna replace that line with the below line to show a proper error message to the user.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;
&lt;span class="n"&gt;mbox&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;showerror&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Error Opening Selected File"&lt;/span&gt; &lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s"&gt;"Oops!, The file you selected : {} can not be opened!"&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nb"&gt;format&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;openfilename&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will create an Error message like the above screenshot I showed you, when the file can not be opened. In the &lt;code&gt;mbox.showerror&lt;/code&gt; function , first argument is the title of the messagebox, and second one is the message to be displayed.&lt;/p&gt;

&lt;p&gt;Now, We need to  write a &lt;code&gt;savefile&lt;/code&gt; function to save our markdown input.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;savefile&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
        &lt;span class="n"&gt;filedata&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;inputeditor&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"1.0"&lt;/span&gt; &lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;END&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="n"&gt;savefilename&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;filedialog&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;asksaveasfilename&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;filetypes&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="s"&gt;"Markdown File"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s"&gt;"*.md"&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
                                                                  &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Text File"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s"&gt;"*.txt"&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;title&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"Save Markdown File"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;savefilename&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
            &lt;span class="k"&gt;try&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
                &lt;span class="n"&gt;f&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;open&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;savefilename&lt;/span&gt; &lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s"&gt;"w"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
                &lt;span class="n"&gt;f&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;write&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;filedata&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
            &lt;span class="k"&gt;except&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
                &lt;span class="n"&gt;mbox&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;showerror&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Error Saving File"&lt;/span&gt; &lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s"&gt;"Oops!, The File : {} can not be saved!"&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nb"&gt;format&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;savefilename&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;

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

&lt;/div&gt;



&lt;p&gt;Here at first we scan all the content of the input field and store it in a variable, then ask user for the filename to save the contents in with giving option for two types of file types (.md and .txt)&lt;/p&gt;

&lt;p&gt;If the user chooses a filename we try to save the contents of the input field stored in the variable &lt;code&gt;filedata&lt;/code&gt;. If a exception is occurred, we show user a error message stating that the program wasn't able to save the file.&lt;/p&gt;

&lt;p&gt;Don't Forget to test your application to check for any bugs! If you and I haven't made any mistakes our programs should run perfectly and look something like this, &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--hcbHDZt2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/i5gjc5mzhaeuvpst9jnr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--hcbHDZt2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/i5gjc5mzhaeuvpst9jnr.png" alt="Final Product" width="697" height="654"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Full Source of this 'tdown' markdown editor is available at &lt;a href="https://github.com/bauripalash/tdown"&gt;GitHub&lt;/a&gt; and also at &lt;a href="https://repl.it/@bauripalash/tdownlive"&gt;Repl.it&lt;/a&gt; where you can test the editor on your browser!&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--lNT8moEI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://media1.tenor.com/images/86bfdafc0ec6509e13b1c1748564b2e6/tenor.gif%3Fitemid%3D9101932" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--lNT8moEI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://media1.tenor.com/images/86bfdafc0ec6509e13b1c1748564b2e6/tenor.gif%3Fitemid%3D9101932" alt="We Finally Did it!" width="333" height="200"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you get into any problems regarding this article you can let me know in the comments or DM me on twitter at &lt;a href="https://twitter.com/bauripalash"&gt;@bauripalash&lt;/a&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  Some Notes:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;First, Remember that, this is just a toy editor. If you want to build more powerful editor you can use any other GUI libraries such as wxPython, PyQT , Kivy and many more which atleast has better html support (&lt;a href="https://wiki.python.org/moin/GuiProgramming"&gt;Full List&lt;/a&gt;).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;In this article I only showed how to build a &lt;em&gt;basic&lt;/em&gt; editor, you can also add many more cool features of your own such as Exporting as HTML or PDF, Adding buttons to simplify writing Markdown... etc etc.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The HTML Rendering modules tkhtmlview or tk_html_widgets are not fully stable and only supports some basic html functionalities, so don't except much.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So... I hope you enjoyed this article and learnt some new things. Don't Forget to let me know if you are stuck somewhere or can't understand something. Last but not Least, Please Let me know if I did any mistakes above and your ideas or suggestions via comments or DM.&lt;/p&gt;

&lt;p&gt;Thank You. 👻&lt;/p&gt;

</description>
      <category>python</category>
      <category>beginners</category>
      <category>tkinter</category>
      <category>markdown</category>
    </item>
    <item>
      <title>Explain PySide2 &amp; PyQT5 Licensing</title>
      <dc:creator>Palash Bauri 👻</dc:creator>
      <pubDate>Sun, 15 Dec 2019 04:23:15 +0000</pubDate>
      <link>https://dev.to/bauripalash/explain-pyside2-pyqt5-licensing-4k50</link>
      <guid>https://dev.to/bauripalash/explain-pyside2-pyqt5-licensing-4k50</guid>
      <description>&lt;p&gt;PySide2 &amp;amp; PyQT5 are most popular QT binding for Python, but their licensing seems very confusing.&lt;/p&gt;

&lt;h4&gt;
  
  
  Assume two scenarios,
&lt;/h4&gt;

&lt;h3&gt;
  
  
  First :
&lt;/h3&gt;

&lt;p&gt;I Develop a cool application with PySide2 but I don't open source it and want to sell it. &lt;em&gt;Can I do that&lt;/em&gt;?&lt;/p&gt;

&lt;h3&gt;
  
  
  Second :
&lt;/h3&gt;

&lt;p&gt;Same as  &lt;em&gt;First&lt;/em&gt; but instead of PySide2 , I use PyQT5. Now &lt;em&gt;Can I Sell That&lt;/em&gt;?&lt;/p&gt;

&lt;p&gt;Any Help?&lt;/p&gt;

</description>
      <category>explainlikeimfive</category>
      <category>python</category>
      <category>qt</category>
      <category>license</category>
    </item>
    <item>
      <title>I have some Steller Lumans and have no idea how to and what to do!</title>
      <dc:creator>Palash Bauri 👻</dc:creator>
      <pubDate>Tue, 19 Nov 2019 16:47:05 +0000</pubDate>
      <link>https://dev.to/bauripalash/i-have-some-steller-lumans-and-have-no-idea-how-to-and-what-to-do-oa1</link>
      <guid>https://dev.to/bauripalash/i-have-some-steller-lumans-and-have-no-idea-how-to-and-what-to-do-oa1</guid>
      <description>&lt;p&gt;I have a keybase account and Steller Foundation has started distributing some Steller Lumens among users every month. At first, I was excited, I thought I was gonna buy some cloud tools with that money 😊 but unfortunately according to India's (I live in India) laws, I can't withdraw that money to banks 😑&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;I literally have no idea what to do with those Lumens. As long as I am in india those are no use to me. 😅&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I am really confused, what to do with those Lumens. 🤔&lt;/p&gt;

&lt;p&gt;Any ideas or suggestions are highly requested 😊&lt;/p&gt;

</description>
      <category>help</category>
      <category>cryptocurrency</category>
      <category>watercooler</category>
    </item>
    <item>
      <title>Cover images of DEV Posts Aren't Visible!? 🤔</title>
      <dc:creator>Palash Bauri 👻</dc:creator>
      <pubDate>Wed, 13 Nov 2019 07:21:09 +0000</pubDate>
      <link>https://dev.to/bauripalash/cover-images-of-dev-posts-aren-t-visible-4o44</link>
      <guid>https://dev.to/bauripalash/cover-images-of-dev-posts-aren-t-visible-4o44</guid>
      <description>&lt;p&gt;Few minutes ago I posted a #Showdev post, but I was kinda shocked when the cover image of that post was not visible, when I checked other posts on DEV, My post was not only effected , no cover image was Visible!&lt;/p&gt;


&lt;blockquote class="ltag__twitter-tweet"&gt;
      &lt;div class="ltag__twitter-tweet__media"&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--jMZeRDBi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/media/EJPCag-U8AANJ-f.jpg" alt="unknown tweet media content"&gt;
      &lt;/div&gt;

  &lt;div class="ltag__twitter-tweet__main"&gt;
    &lt;div class="ltag__twitter-tweet__header"&gt;
      &lt;img class="ltag__twitter-tweet__profile-image" src="https://res.cloudinary.com/practicaldev/image/fetch/s--RRVJIrlp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/profile_images/1123425973137920001/YwGp1BYU_normal.jpg" alt="Palash Bauri 👻 profile image"&gt;
      &lt;div class="ltag__twitter-tweet__full-name"&gt;
        Palash Bauri 👻
      &lt;/div&gt;
      &lt;div class="ltag__twitter-tweet__username"&gt;
        &lt;a class="mentioned-user" href="https://dev.to/bauripalash"&gt;@bauripalash&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="ltag__twitter-tweet__twitter-logo"&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ir1kO05j--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/twitter-f95605061196010f91e64806688390eb1a4dbc9e913682e043eb8b1e06ca484f.svg" alt="twitter logo"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="ltag__twitter-tweet__body"&gt;
      &lt;a href="https://twitter.com/ThePracticalDev"&gt;@ThePracticalDev&lt;/a&gt; &lt;a href="https://twitter.com/bendhalpern"&gt;@bendhalpern&lt;/a&gt; Cover Images of Posts aren't visible at &lt;a href="https://t.co/D1ekqMR1hV"&gt;DEV.to&lt;/a&gt; 🤔🤔 
    &lt;/div&gt;
    &lt;div class="ltag__twitter-tweet__date"&gt;
      07:07 AM - 13 Nov 2019
    &lt;/div&gt;


    &lt;div class="ltag__twitter-tweet__actions"&gt;
      &lt;a href="https://twitter.com/intent/tweet?in_reply_to=1194512107737243648" class="ltag__twitter-tweet__actions__button"&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--fFnoeFxk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/twitter-reply-action-238fe0a37991706a6880ed13941c3efd6b371e4aefe288fe8e0db85250708bc4.svg" alt="Twitter reply action"&gt;
      &lt;/a&gt;
      &lt;a href="https://twitter.com/intent/retweet?tweet_id=1194512107737243648" class="ltag__twitter-tweet__actions__button"&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--k6dcrOn8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/twitter-retweet-action-632c83532a4e7de573c5c08dbb090ee18b348b13e2793175fea914827bc42046.svg" alt="Twitter retweet action"&gt;
      &lt;/a&gt;
      &lt;a href="https://twitter.com/intent/like?tweet_id=1194512107737243648" class="ltag__twitter-tweet__actions__button"&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--SRQc9lOp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/twitter-like-action-1ea89f4b87c7d37465b0eb78d51fcb7fe6c03a089805d7ea014ba71365be5171.svg" alt="Twitter like action"&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/blockquote&gt;


&lt;p&gt;I checked again , the original image URL was working fine. Problem seems to be with Cloudinary!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;UPDATE #1&lt;/strong&gt; : Seems like cover image is visible on Desktop but not on Mobile.&lt;/p&gt;

&lt;p&gt;Please Let me know if I'm the only one seeing this issue? Can you see this post's Cover?&lt;/p&gt;

</description>
      <category>meta</category>
      <category>devto</category>
      <category>issue</category>
    </item>
    <item>
      <title>Lwing : Send Stylish Messages on Whatsapp, Messenger and More</title>
      <dc:creator>Palash Bauri 👻</dc:creator>
      <pubDate>Wed, 13 Nov 2019 07:03:48 +0000</pubDate>
      <link>https://dev.to/bauripalash/lwing-send-stylish-messages-on-whatsapp-messenger-ans-more-550g</link>
      <guid>https://dev.to/bauripalash/lwing-send-stylish-messages-on-whatsapp-messenger-ans-more-550g</guid>
      <description>&lt;p&gt;Let's Make It Quick! 🚀&lt;/p&gt;

&lt;h2&gt;
  
  
  🔥 What is Lwing?
&lt;/h2&gt;

&lt;p&gt;lwing (Pronounced as "el-wing") is basically a unicode text styler. It takes your simple english input and converts it to some mathematical unicode charecters to make them look stylish and different.&lt;/p&gt;

&lt;h2&gt;
  
  
  🤔 Why The Name "Lwing"?
&lt;/h2&gt;

&lt;p&gt;I don't know, at first I named it lacewing but mistakenly in website title I named it &lt;em&gt;lwing&lt;/em&gt; . Now it's named as Lwing!&lt;/p&gt;

&lt;h2&gt;
  
  
  📱 Where Can I use Lwing generated text?
&lt;/h2&gt;

&lt;p&gt;You can use lwing generated text mostly everywhere including Whatsapp , Facebook , Messenger, SMS and even at printing!&lt;/p&gt;

&lt;h2&gt;
  
  
  🌐 I want to use it Now!
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Just head over to &lt;a href="https://lwing.ml"&gt;https://lwing.ml&lt;/a&gt; 😊
&lt;/h3&gt;

&lt;h2&gt;
  
  
  💻 What Tech Stack does Lwing use?
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Svelte&lt;/li&gt;
&lt;li&gt;HTML&lt;/li&gt;
&lt;li&gt;CSS&lt;/li&gt;
&lt;li&gt;JS / NodeJs&lt;/li&gt;
&lt;li&gt;Netlify&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  🔥 🤔 How fast is Lwing?
&lt;/h2&gt;

&lt;h3&gt;
  
  
  😎 Fast Like Sonic Boom‼️
&lt;/h3&gt;

&lt;p&gt;Here's Lighthouse Report : &lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--AYEU1AJg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/h8399vt2txhq13jryaz6.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--AYEU1AJg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/h8399vt2txhq13jryaz6.jpg" alt="" width="880" height="794"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  😊 Want to Contribute?
&lt;/h2&gt;

&lt;p&gt;Here's GitHub Repository:&lt;br&gt;
&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--566lAguM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/bauripalash"&gt;
        bauripalash
      &lt;/a&gt; / &lt;a href="https://github.com/bauripalash/lwing"&gt;
        lwing
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      Spice Up Your Winter Messages With Lwing 😎😻📱
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;p&gt;&lt;a rel="noopener noreferrer" href="https://github.com/bauripalash/lwing./public/lwing_cover.png"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--i1alO5Mh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/bauripalash/lwing./public/lwing_cover.png" alt=""&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
🔥 What is Lwing?&lt;/h2&gt;
&lt;p&gt;lwing (Pronounced as "el-wing") is basically a unicode text styler.
It takes your simple english input and converts it to some mathematical unicode charecters to make them look stylish and different.&lt;/p&gt;
&lt;h2&gt;
🔥 Where can I use lwing generated text?&lt;/h2&gt;
&lt;p&gt;You can use lwing generated text mostly everywhere including Whatsapp , Facebook , Messenger, SMS and even at printing!&lt;/p&gt;
&lt;h2&gt;
🤔 How to Use Lwing?&lt;/h2&gt;
&lt;p&gt;User Manual can be found on &lt;a href="https://github.com/bauripalash/lwing/wiki"&gt;📓 Wiki&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
🔥 What Stack does lwing use?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Svelte&lt;/li&gt;
&lt;li&gt;HTML&lt;/li&gt;
&lt;li&gt;CSS&lt;/li&gt;
&lt;li&gt;JS / NodeJs&lt;/li&gt;
&lt;li&gt;Netlify&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
🔥 You want to contribute?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Fork &amp;amp; Clone.&lt;/li&gt;
&lt;li&gt;Install node modules with &lt;code&gt;yarn install&lt;/code&gt; or &lt;code&gt;npm install&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Fire up your favourite code editor or IDE and make changes.&lt;/li&gt;
&lt;li&gt;Commit your changes and open a pull request.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
Buy Me A Coffee!&lt;/h2&gt;
&lt;p&gt;&lt;a href="https://www.buymeacoffee.com/palash" rel="nofollow"&gt;&lt;img src="https://camo.githubusercontent.com/3ba8042b343d12b84b85d2e6563376af4150f9cd09e72428349c1656083c8b5a/68747470733a2f2f63646e2e6275796d6561636f666665652e636f6d2f627574746f6e732f64656661756c742d6f72616e67652e706e67" alt="Buy Me A Coffee"&gt;&lt;/a&gt;&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/bauripalash/lwing"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;br&gt;
&lt;/div&gt;
&lt;br&gt;


&lt;p&gt;Feel free to Fork, Make Improvements and Send Pull Requests 😊😊&lt;/p&gt;




&lt;p&gt;You can also Upvote Lwing on Product Hunt at &lt;a href="https://www.producthunt.com/posts/lwing"&gt;https://www.producthunt.com/posts/lwing&lt;/a&gt; here &lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.producthunt.com/posts/lwing?utm_source=badge-featured&amp;amp;utm_medium=badge&amp;amp;utm_souce=badge-lwing"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--J4Igk1Hj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://api.producthunt.com/widgets/embed-image/v1/featured.svg%3Fpost_id%3D174320%26theme%3Dlight" alt="" width="250" height="54"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;If you want to support my work , you can donate via Paypal at &lt;a href="https://paypal.me/bauripalash"&gt;https://paypal.me/bauripalash&lt;/a&gt; or via Paytm (If Indian citizen) at &lt;a href="https://p-y.tm/9V-oX9y"&gt;https://p-y.tm/9V-oX9y&lt;/a&gt; 😊😻!!&lt;/p&gt;

&lt;p&gt;Thank You ❤️&lt;/p&gt;

</description>
      <category>showdev</category>
      <category>javascript</category>
      <category>unicode</category>
    </item>
    <item>
      <title>Is it safe to use Google APIs from Client-Side Javascript 🤔</title>
      <dc:creator>Palash Bauri 👻</dc:creator>
      <pubDate>Mon, 04 Nov 2019 15:31:07 +0000</pubDate>
      <link>https://dev.to/bauripalash/is-it-safe-to-use-googlr-apis-from-client-side-javascript-50bp</link>
      <guid>https://dev.to/bauripalash/is-it-safe-to-use-googlr-apis-from-client-side-javascript-50bp</guid>
      <description>&lt;p&gt;Today I was experimenting with APIs , and landed on &lt;a href="https://developers.google.com/drive/api/v3/quickstart/js"&gt;https://developers.google.com/drive/api/v3/quickstart/js&lt;/a&gt; while learning about Google Drive API. After reading the code example on that page , I was concerned about exposing my API Key and Client ID to public.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="cp"&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;html&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;title&amp;gt;&lt;/span&gt;Drive API Quickstart&lt;span class="nt"&gt;&amp;lt;/title&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;charset=&lt;/span&gt;&lt;span class="s"&gt;"utf-8"&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt;Drive API Quickstart&lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;

    &lt;span class="c"&gt;&amp;lt;!--Add buttons to initiate auth sequence and sign out--&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;button&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"authorize_button"&lt;/span&gt; &lt;span class="na"&gt;style=&lt;/span&gt;&lt;span class="s"&gt;"display: none;"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Authorize&lt;span class="nt"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;button&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"signout_button"&lt;/span&gt; &lt;span class="na"&gt;style=&lt;/span&gt;&lt;span class="s"&gt;"display: none;"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Sign Out&lt;span class="nt"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;

    &lt;span class="nt"&gt;&amp;lt;pre&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"content"&lt;/span&gt; &lt;span class="na"&gt;style=&lt;/span&gt;&lt;span class="s"&gt;"white-space: pre-wrap;"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/pre&amp;gt;&lt;/span&gt;

    &lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"text/javascript"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="c1"&gt;// Client ID and API key from the Developer Console&lt;/span&gt;
      &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;CLIENT_ID&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;&amp;lt;YOUR_CLIENT_ID&amp;gt;&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
      &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;API_KEY&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;&amp;lt;YOUR_API_KEY&amp;gt;&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

      &lt;span class="c1"&gt;// Array of API discovery doc URLs for APIs used by the quickstart&lt;/span&gt;
      &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;DISCOVERY_DOCS&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;https://www.googleapis.com/discovery/v1/apis/drive/v3/rest&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;

      &lt;span class="c1"&gt;// Authorization scopes required by the API; multiple scopes can be&lt;/span&gt;
      &lt;span class="c1"&gt;// included, separated by spaces.&lt;/span&gt;
      &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;SCOPES&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://www.googleapis.com/auth/drive.metadata.readonly&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

      &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;authorizeButton&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;authorize_button&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;signoutButton&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;signout_button&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

      &lt;span class="cm"&gt;/**
       *  On load, called to load the auth2 library and API client library.
       */&lt;/span&gt;
      &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;handleClientLoad&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;gapi&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;load&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;client:auth2&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;initClient&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="p"&gt;}&lt;/span&gt;

      &lt;span class="cm"&gt;/**
       *  Initializes the API client library and sets up sign-in state
       *  listeners.
       */&lt;/span&gt;
      &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;initClient&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;gapi&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;client&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;init&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
          &lt;span class="na"&gt;apiKey&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;API_KEY&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;clientId&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;CLIENT_ID&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;discoveryDocs&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;DISCOVERY_DOCS&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;scope&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;SCOPES&lt;/span&gt;
        &lt;span class="p"&gt;}).&lt;/span&gt;&lt;span class="nx"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
          &lt;span class="c1"&gt;// Listen for sign-in state changes.&lt;/span&gt;
&lt;span class="p"&gt;.............&lt;/span&gt; &lt;span class="err"&gt;✂️&lt;/span&gt; &lt;span class="p"&gt;...........&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  So, &lt;strong&gt;Is it really safe to use code like this in public facing production webapps? 🤔🤔&lt;/strong&gt;
&lt;/h2&gt;

</description>
      <category>help</category>
      <category>javascript</category>
      <category>api</category>
    </item>
    <item>
      <title>Hacktoberfest Done 💥 but Not Done 🚀</title>
      <dc:creator>Palash Bauri 👻</dc:creator>
      <pubDate>Tue, 01 Oct 2019 12:33:27 +0000</pubDate>
      <link>https://dev.to/bauripalash/hacktoberfest-done-but-not-done-488f</link>
      <guid>https://dev.to/bauripalash/hacktoberfest-done-but-not-done-488f</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--1379eCz9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/y5hawwvcnvjquiz7y72n.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--1379eCz9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/y5hawwvcnvjquiz7y72n.jpg" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>hacktoberfest</category>
      <category>github</category>
      <category>opensource</category>
    </item>
    <item>
      <title>PollarBoy - Minimal link based polling app made for fun!</title>
      <dc:creator>Palash Bauri 👻</dc:creator>
      <pubDate>Mon, 09 Sep 2019 14:53:09 +0000</pubDate>
      <link>https://dev.to/bauripalash/pollarboy-minimal-link-based-polling-app-made-for-fun-1ena</link>
      <guid>https://dev.to/bauripalash/pollarboy-minimal-link-based-polling-app-made-for-fun-1ena</guid>
      <description>&lt;p&gt;Last Week, One of my friend created a Poll to see which game our friend circle likes most, PUBG or FreeFire. He used one of the free poll maker from internet. When I clicked the link he shared, It was bloated with ads, I literally took me a whole minute to figure out where to cast Vote 😕 . &lt;/p&gt;

&lt;p&gt;That's when I decided, I'll build my own Poll Maker! (Yet Another Way To Prove My Coolness 😎 To Show My Friend Circle 😅)&lt;/p&gt;

&lt;p&gt;And So Here's the result : &lt;/p&gt;

&lt;h3&gt;
  
  
  🌟 PollarBoy! 🌟
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://pollarboy.glitch.me/p/liveonmars" rel="noopener noreferrer"&gt;Here's a sample poll on , If You Want To Live On Mars or not?&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  🔮 Features :
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;Minimal&lt;/li&gt;
&lt;li&gt;No Bloating&lt;/li&gt;
&lt;li&gt;Ad Free&lt;/li&gt;
&lt;li&gt;No Limit on Responses&lt;/li&gt;
&lt;li&gt;Ofcourse Free&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  📐 Tools Used :
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;NodeJS&lt;/li&gt;
&lt;li&gt;Express&lt;/li&gt;
&lt;li&gt;Lowdb&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  📋 TODO :
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;[] Checkbox for Multiple Votie From Same User!&lt;/li&gt;
&lt;li&gt;[] Themes&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  📜 Source :
&lt;/h1&gt;

&lt;h2&gt;
  
  
  GitHub :
&lt;/h2&gt;


&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/bauripalash" rel="noopener noreferrer"&gt;
        bauripalash
      &lt;/a&gt; / &lt;a href="https://github.com/bauripalash/pollarboy" rel="noopener noreferrer"&gt;
        pollarboy
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      PollarBoy is a simple and minimal link based polling webapp made for fun!
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;div class="markdown-heading"&gt;
&lt;h1 class="heading-element"&gt;PollarBoy 📬&lt;/h1&gt;

&lt;/div&gt;
&lt;div class="markdown-heading"&gt;
&lt;h3 class="heading-element"&gt;PollarBoy is a simple and minimal link based polling webapp made for fun!&lt;/h3&gt;

&lt;/div&gt;
&lt;p&gt;&lt;a rel="noopener noreferrer" href="https://github.com/bauripalash/pollarboy./public/screenshot.png"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Fbauripalash%2Fpollarboy.%2Fpublic%2Fscreenshot.png" alt=""&gt;&lt;/a&gt;&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h3 class="heading-element"&gt;Stack :&lt;/h3&gt;

&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;HTML&lt;/li&gt;
&lt;li&gt;CSS&lt;/li&gt;
&lt;li&gt;Javascript&lt;/li&gt;
&lt;li&gt;NodeJs&lt;/li&gt;
&lt;li&gt;Express&lt;/li&gt;
&lt;li&gt;Lowdb&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="markdown-heading"&gt;
&lt;h3 class="heading-element"&gt;Host Your Own PollarBoy&lt;/h3&gt;

&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;Remix &lt;a href="https://glitch.com/~pollarboy" rel="nofollow noopener noreferrer"&gt;on Glitch&lt;/a&gt; &amp;amp; Get Your Own PollarBoy!&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="markdown-heading"&gt;
&lt;h4 class="heading-element"&gt;Feel Free to Find Bugs and Submit Fixes! ❤️&lt;/h4&gt;

&lt;/div&gt;
&lt;p&gt;Made by Palash Bauri 👻&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/bauripalash/pollarboy" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;br&gt;
&lt;/div&gt;
&lt;br&gt;


&lt;h2&gt;
  
  
  Glitch :
&lt;/h2&gt;


&lt;div class="glitch-embed-wrap"&gt;
  &lt;iframe src="https://glitch.com/embed/#!/embed/pollarboy?previewSize=100&amp;amp;path=index.html" alt="pollarboy on glitch"&gt;&lt;/iframe&gt;
&lt;/div&gt;


&lt;h2&gt;
  
  
  Feel Free To Find Bugs and/or Fix Them! ♥️
&lt;/h2&gt;




&lt;p&gt;If You Like My Work (My Articles, Stories, Softwares, Researches and many more) Consider &lt;a href="https://www.buymeacoffee.com/palash" rel="noopener noreferrer"&gt;Buying Me A Coffee ☕&lt;/a&gt; 🤗&lt;/p&gt;

</description>
      <category>showdev</category>
      <category>githunt</category>
      <category>javascript</category>
      <category>tools</category>
    </item>
    <item>
      <title>Explain This Unsigned Int Meme Like I'm Five</title>
      <dc:creator>Palash Bauri 👻</dc:creator>
      <pubDate>Tue, 03 Sep 2019 15:05:39 +0000</pubDate>
      <link>https://dev.to/bauripalash/explain-this-unsigned-int-meme-like-i-m-five-2b4b</link>
      <guid>https://dev.to/bauripalash/explain-this-unsigned-int-meme-like-i-m-five-2b4b</guid>
      <description>&lt;p&gt;Please Explain This meme?&lt;/p&gt;

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

&lt;p&gt;Where's the extra &lt;code&gt;-1&lt;/code&gt; coming from?&lt;/p&gt;

</description>
      <category>explainlikeimfive</category>
      <category>c</category>
      <category>devmeme</category>
    </item>
    <item>
      <title>Penme - OpenSource Note App Focused on Privacy!</title>
      <dc:creator>Palash Bauri 👻</dc:creator>
      <pubDate>Sat, 27 Jul 2019 14:03:41 +0000</pubDate>
      <link>https://dev.to/bauripalash/penme-opensource-note-app-focused-on-privacy-34ea</link>
      <guid>https://dev.to/bauripalash/penme-opensource-note-app-focused-on-privacy-34ea</guid>
      <description>&lt;h3&gt;
  
  
  👻 Story of Penme :
&lt;/h3&gt;

&lt;p&gt;One day after reaching my class I recalled, "I forgot my notebook", ofcourse i had a mobile but unfourtunately without a note taking app and When i tried downloading one, the internet became so slow that it was taking so long to download! I was like damn, I'll go home today and build my own lightweight note taking app!&lt;/p&gt;

&lt;h3&gt;
  
  
  👻 What is Penme :
&lt;/h3&gt;

&lt;p&gt;Penme is a lightweight open source note taking app focused on privacy! All your data is stored in your device, none of your data never leaves your device (unless the user does something silly 😉)&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fmgot95e3zm38rok34qkr.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fmgot95e3zm38rok34qkr.jpg"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  👻 Lighthouse Score:
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F6w7v03oyid9psn9a3zh7.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F6w7v03oyid9psn9a3zh7.jpg"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  👻 Features :
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;You Can Take notes (wink)&lt;/li&gt;
&lt;li&gt;You can share those notes with your friends by just sharing a link&lt;/li&gt;
&lt;li&gt;You can save notes and edit them later&lt;/li&gt;
&lt;li&gt;It's fast&lt;/li&gt;
&lt;li&gt;It's a PWA &lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  👻 Help Me Improve :
&lt;/h3&gt;


&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/bauripalash" rel="noopener noreferrer"&gt;
        bauripalash
      &lt;/a&gt; / &lt;a href="https://github.com/bauripalash/penme" rel="noopener noreferrer"&gt;
        penme
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      Penme is a lightweight open source note taking app focused on privacy!
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;p&gt;&lt;a rel="noopener noreferrer" href="https://github.com/bauripalash/penme./src/static/imgs/scover.png"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Fbauripalash%2Fpenme.%2Fsrc%2Fstatic%2Fimgs%2Fscover.png" alt="PENME"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h3 class="heading-element"&gt;👻 &lt;a href="https://penme.ml" rel="nofollow noopener noreferrer"&gt;Open PENME.ML&lt;/a&gt;
&lt;/h3&gt;
&lt;/div&gt;
&lt;div class="markdown-heading"&gt;
&lt;h3 class="heading-element"&gt;👻 What is Penme :&lt;/h3&gt;
&lt;/div&gt;
&lt;p&gt;Penme is a lightweight open source note taking app focused on privacy! All your data is stored in your device, none of your data never leaves your device (unless the user does something silly 😉 )&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h3 class="heading-element"&gt;👻 Story of Penme :&lt;/h3&gt;
&lt;/div&gt;
&lt;p&gt;One day after reaching my class I recalled, "I forgot my notebook", ofcourse i had a mobile but unfourtunately without a note taking app and When i tried downloading one, the internet became so slow that it was taking so long to download! I was like damn, I'll go home today and build my own lightweight note taking app!&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;👻 Features :&lt;/h2&gt;

&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;You Can Take notes (😉)&lt;/li&gt;
&lt;li&gt;You can share those notes with your friends by just sharing a link&lt;/li&gt;
&lt;li&gt;You can save notes and edit them later&lt;/li&gt;
&lt;li&gt;It's fast&lt;/li&gt;
&lt;li&gt;It's a &lt;a href="https://en.wikipedia.org/wiki/Progressive_web_applications" rel="nofollow noopener noreferrer"&gt;PWA&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;👻 Wanna Help Improve It?&lt;/h2&gt;

&lt;/div&gt;
&lt;div class="markdown-heading"&gt;
&lt;h4 class="heading-element"&gt;Steps:&lt;/h4&gt;

&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;Fork This…&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/bauripalash/penme" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;


&lt;h3&gt;
  
  
  &lt;a href="https://www.producthunt.com/posts/penme" rel="noopener noreferrer"&gt;👻 Upvote on ProductHunt&lt;/a&gt;
&lt;/h3&gt;




&lt;p&gt;If You Like My Work (My Articles, Stories, Softwares, Researches and many more) Consider &lt;a href="https://www.buymeacoffee.com/palash" rel="noopener noreferrer"&gt;Buying Me A Coffee ☕&lt;/a&gt; 🤗&lt;/p&gt;

</description>
      <category>showdev</category>
      <category>githunt</category>
      <category>productivity</category>
    </item>
  </channel>
</rss>
