<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/">
  <channel>
    <title>Glitch &amp;mdash; Attach to Process</title>
    <link>https://devblog.dinobansigan.com/tag:Glitch</link>
    <description>Thoughts and Notes on Software Development</description>
    <pubDate>Tue, 14 Apr 2026 14:40:50 +0000</pubDate>
    <image>
      <url>https://i.snap.as/4wmUdb6N.png</url>
      <title>Glitch &amp;mdash; Attach to Process</title>
      <link>https://devblog.dinobansigan.com/tag:Glitch</link>
    </image>
    <item>
      <title>Popular Posts Glitch App</title>
      <link>https://devblog.dinobansigan.com/popular-posts-glitch-app?pk_campaign=rss-feed</link>
      <description>&lt;![CDATA[Update 4/23/2021: The write.as team has introduced some rate-limiting features on their API to combat spam bots. That stopped this Glitch app and my other Blazor WASM apps from working.&#xA;&#xA;I created a Glitch App that displays the most viewed posts on my online journal. I embedded it on my About page. Just to show how easy it is to embed a Glitch app into a Write.as post, I embedded it at the bottom of this post too. For more information on embedding Glitch apps into posts on Write.as, look here.&#xA;!--more--&#xA;&#xA;Some notes on what I learned while working on this app:&#xA;&#xA;Similar to when I worked on the Search app, you&#39;ll want to have a basic understanding of web development, which means knowing a little bit about HTML, CSS, some Javascript and some Python. For this app though, I had to do a lot more Python programming.&#xA;To create this app, I remixed the Search app I created. I did this because the app already had code to search through all the posts I have on my journal. All I needed to do, was add code to find the most viewed posts out of all posts.&#xA;Finding the most viewed posts means sorting the list by view count and then returning the top X amount of posts. Both of those actions, I had to learn how to do in Python. Fun stuff.&#xA;I also had to learn how to typecast a string into an int in Python. Note, that in Python, you wrap the parenthesis on the object you are casting, not on the data type you want to cast it to. Minor syntax difference compared to typecasting in C#, but it won&#39;t work unless you get it right.&#xA;Next I had to learn how to display the posts on a webpage as soon as I open the app. This was noteworthy because the original Search app was designed to work with two webpages; a Search page and a Search Results page. For this app, I needed to show the Search Results page as soon as I open the app. To do this, I tinkered with the code by commenting out a bunch of stuff and running the app to see what would happen. I didn&#39;t know what I was doing most of the time, but that was what made it all the more fun for me. I&#39;m so used to working with C# and .NET where I have an idea of what will happen just by looking at the code. It was a fun change of pace to work with something where, I had no idea what would happen if I comment out lines of code.&#xA;Lastly, I decided to clean up all my Inline CSS and learned how to use Internal CSS instead. Okay, it wasn&#39;t really that I didn&#39;t know how to style a webpage using Internal CSS, but it was more about the fact that I&#39;ve never had to style a webpage using Internal CSS, ever. Not even in my work as a software developer. So, I just wanted some real world practice with it.&#xA;&#xA;Some links to pages that helped me get it done:&#xA;&#xA;Sorting Mini-HOW TO&#xA;How to Sort a List, Tuple or Object (with sorted) in Python&#xA;How to get top 5 objects from an array in Python&#xA;How to use comments in Python&#xA;Python:Convert a String to a Number&#xA;HTML Styles - CSS&#xA;&#xA;Tags: #Bookmarks #Glitch #Python&#xA;&#xA;div class=&#34;glitch-embed-wrap&#34; style=&#34;height: 350px; width: 100%;&#34;&#xA;  &lt;iframe&#xA;    src=&#34;https://glitch.com/embed/#!/embed/popular-posts-wa?path=app.py&amp;previewSize=100&#34;&#xA;    title=&#34;popular-posts-wa on Glitch&#34;&#xA;    allow=&#34;geolocation; microphone; camera; midi; vr; encrypted-media&#34;&#xA;    style=&#34;height: 100%; width: 100%; border: 0;&#34;  /iframe&#xA;/div&#xA;&#xA;a href=&#34;https://remark.as/p/devblog.dinobansigan.com/popular-posts-glitch-app&#34;Discuss.../a or leave a comment below.]]&gt;</description>
      <content:encoded><![CDATA[<p><em>Update 4/23/2021: The write.as team has introduced some rate-limiting features on their API to combat spam bots. That stopped this Glitch app and my other Blazor WASM apps from working.</em></p>

<p>I created a <a href="https://glitch.com/~popular-posts-wa">Glitch App</a> that displays the most viewed posts on my <a href="https://journal.dinobansigan.com/">online journal</a>. I embedded it on my <a href="https://journal.dinobansigan.com/about">About page</a>. Just to show how easy it is to embed a <a href="https://glitch.com/">Glitch</a> app into a <a href="https://write.as/">Write.as</a> post, I embedded it at the bottom of this post too. For more information on embedding Glitch apps into posts on Write.as, look <a href="https://discuss.write.as/t/is-it-possible-to-embed-a-glitch-app-into-a-write-as-page/1051/2?u=dino">here</a>.
</p>

<p>Some notes on what I learned while working on this app:</p>
<ul><li>Similar to when I worked on the Search app, you&#39;ll want to have a basic understanding of web development, which means knowing a little bit about HTML, CSS, some Javascript and some Python. <em>For this app though, I had to do a lot more Python programming.</em></li>
<li>To create this app, I remixed the <a href="https://glitch.com/~search-journal">Search app</a> I created. I did this because the app already had code to search through all the posts I have on my journal. All I needed to do, was add code to find the most viewed posts out of all posts.</li>
<li>Finding the most viewed posts means sorting the list by view count and then returning the top X amount of posts. Both of those actions, I had to learn how to do in Python. Fun stuff.</li>
<li>I also had to learn how to typecast a <code>string</code> into an <code>int</code> in Python. Note, that in Python, you wrap the parenthesis on the object you are casting, not on the data type you want to cast it to. <em>Minor syntax difference compared to typecasting in C#, but it won&#39;t work unless you get it right.</em></li>
<li>Next I had to learn how to display the posts on a webpage as soon as I open the app. This was noteworthy because the original Search app was designed to work with two webpages; a <em>Search</em> page and a <em>Search Results</em> page. For this app, I needed to show the <em>Search Results</em> page as soon as I open the app. To do this, I tinkered with the code by commenting out a bunch of stuff and running the app to see what would happen. I didn&#39;t know what I was doing most of the time, but that was what made it all the more fun for me. I&#39;m so used to working with C# and .NET where I have an idea of what will happen just by looking at the code. It was a fun change of pace to work with something where, I had no idea what would happen if I comment out lines of code.</li>
<li>Lastly, I decided to clean up all my Inline CSS and learned how to use Internal CSS instead. <em>Okay, it wasn&#39;t really that I didn&#39;t know how to style a webpage using Internal CSS, but it was more about the fact that I&#39;ve never had to style a webpage using Internal CSS, ever. Not even in my work as a software developer. So, I just wanted some real world practice with it.</em></li></ul>

<p>Some links to pages that helped me get it done:</p>
<ul><li><a href="https://wiki.python.org/moin/HowTo/Sorting">Sorting Mini-HOW TO</a></li>
<li><a href="https://www.pythoncentral.io/how-to-sort-a-list-tuple-or-object-with-sorted-in-python/">How to Sort a List, Tuple or Object (with sorted) in Python</a></li>
<li><a href="https://stackoverflow.com/a/56005222/5041911">How to get top 5 objects from an array in Python</a></li>
<li><a href="https://www.pythonforbeginners.com/comments/comments-in-python">How to use comments in Python</a></li>
<li><a href="https://progzoo.net/wiki/Python:Convert_a_String_to_a_Number">Python:Convert a String to a Number</a></li>
<li><a href="https://www.w3schools.com/html/html_css.asp">HTML Styles – CSS</a></li></ul>

<p><em>Tags: <a href="https://devblog.dinobansigan.com/tag:Bookmarks" class="hashtag"><span>#</span><span class="p-category">Bookmarks</span></a> <a href="https://devblog.dinobansigan.com/tag:Glitch" class="hashtag"><span>#</span><span class="p-category">Glitch</span></a> <a href="https://devblog.dinobansigan.com/tag:Python" class="hashtag"><span>#</span><span class="p-category">Python</span></a></em></p>

<div class="glitch-embed-wrap" style="height: 350px; width: 100%;">
  <iframe src="https://glitch.com/embed/#!/embed/popular-posts-wa?path=app.py&amp;previewSize=100" title="popular-posts-wa on Glitch" style="height: 100%; width: 100%; border: 0;">
  </iframe>
</div>

<p><strong><a href="https://remark.as/p/devblog.dinobansigan.com/popular-posts-glitch-app">Discuss...</a></strong> or leave a comment below.</p>
]]></content:encoded>
      <guid>https://devblog.dinobansigan.com/popular-posts-glitch-app</guid>
      <pubDate>Wed, 22 Jan 2020 20:50:11 +0000</pubDate>
    </item>
    <item>
      <title>Search Page Up and Running</title>
      <link>https://devblog.dinobansigan.com/search-page-up-and-running?pk_campaign=rss-feed</link>
      <description>&lt;![CDATA[Update 4/23/2021: The write.as team has introduced some rate-limiting features on their API to combat spam bots. That stopped this Glitch app and my other Blazor WASM apps from working.&#xA;&#xA;Took me a couple of days, but I got my journal search page up and running. That was a great learning experience.&#xA;&#xA;If you want to remix my search app, you can find it here. If you want to remix the original Write.as Search app, you can find it here.&#xA;&#xA;Prior to creating a Write.as blog, I&#39;ve never even heard of Glitch. Below is a list of notes and references I&#39;ve made while trying to get my search page working.&#xA;!--more--&#xA;&#xA;I still don&#39;t exactly know how to describe Glitch. The best I can come up with is that it is like a web application generator, that is sort of like Github, where you can fork (remix) projects (apps) and test it right on the browser. With Glitch, your browser is your IDE; you develop and test on it. It also acts like &#34;source control&#34; with the ability to roll back (rewind) to your previous changes.&#xA;To get the search page working, you need to know at least the basics of web development. I am primarily a back-end developer, so it took me awhile to get my search page working the way I want it to. Specifically you will need to know the basics of HTML, CSS and Javascript. Will also help to know a little bit of Python.&#xA;Prior to me working on this search page app, I&#39;ve never even seen Python code. I&#39;ve heard of it, (isn&#39;t it like the most popular programming language right now?), but never had to use it. &#xA;   Pro tip: their &#34;if&#34; statements end with a colon.&#xA;I&#39;ve also never heard of Flask until I had to figure out how the HTMLs were getting rendered by Python. &#xA;That lead me to figuring out that Flask uses the Jinja2 template engine. This stumped me for awhile, because the template language looked very similar to the Liquid template language that the Jekyll static site generator uses.&#xA;&#xA;Some links to pages that helped me get it done:&#xA;&#xA;Rendering Templates with Flask&#xA;Python Tutorial&#xA;Javascript - Disable button when Textfield is empty&#xA;CSS - Stop text from overflowing&#xA;Checking for null or empty with Jinja2&#xA;Trimming strings with Jinja2&#xA;Removing unnecessary white space from Jinja rendered template&#xA;&#xA;Tags: #SiteUpdates #Bookmarks #Glitch #Python&#xA;&#xA;a href=&#34;https://remark.as/p/devblog.dinobansigan.com/search-page-up-and-running&#34;Discuss.../a or leave a comment below.]]&gt;</description>
      <content:encoded><![CDATA[<p><em>Update 4/23/2021: The write.as team has introduced some rate-limiting features on their API to combat spam bots. That stopped this Glitch app and my other Blazor WASM apps from working.</em></p>

<p>Took me a couple of days, but I got my journal <a href="https://search-journal.glitch.me/">search page</a> up and running. That was a great learning experience.</p>

<p>If you want to remix my search app, you can find it <a href="https://glitch.com/~search-journal">here</a>. If you want to remix the original Write.as Search app, you can find it <a href="https://glitch.com/~write-as-search">here</a>.</p>

<p>Prior to creating a Write.as blog, I&#39;ve never even heard of <a href="https://glitch.com/">Glitch</a>. Below is a list of notes and references I&#39;ve made while trying to get my search page working.
</p>
<ul><li>I still don&#39;t exactly know how to describe Glitch. The best I can come up with is that it is like a web application generator, that is sort of like <a href="https://github.com/">Github</a>, where you can fork (remix) projects (apps) and test it right on the browser. With Glitch, your browser is your IDE; you develop and test on it. It also acts like “source control” with the ability to roll back (rewind) to your previous changes.</li>
<li>To get the search page working, you need to know at least the basics of web development. I am primarily a back-end developer, so it took me awhile to get my search page working the way I want it to. Specifically you will need to know the basics of HTML, CSS and Javascript. Will also help to know a little bit of Python.</li>
<li>Prior to me working on this search page app, I&#39;ve never even seen <a href="https://en.wikipedia.org/wiki/Python_%28programming_language%29">Python</a> code. I&#39;ve heard of it, <em>(isn&#39;t it like the most popular programming language right now?)</em>, but never had to use it.
<ul><li>Pro tip: their “if” statements end with a colon.</li></ul></li>
<li>I&#39;ve also never heard of <a href="https://www.fullstackpython.com/flask.html">Flask</a> until I had to figure out how the HTMLs were getting rendered by Python.</li>
<li>That lead me to figuring out that Flask uses the <a href="https://www.fullstackpython.com/jinja2.html">Jinja2 template engine</a>. This stumped me for awhile, because the template language looked very similar to the <a href="https://shopify.github.io/liquid/">Liquid template language</a> that the Jekyll static site generator uses.</li></ul>

<p>Some links to pages that helped me get it done:</p>
<ul><li><a href="https://flask.palletsprojects.com/en/1.1.x/quickstart/">Rendering Templates with Flask</a></li>
<li><a href="https://www.tutorialspoint.com/python/index.htm">Python Tutorial</a></li>
<li><a href="https://stackoverflow.com/a/7067040/5041911">Javascript – Disable button when Textfield is empty</a></li>
<li><a href="https://stackoverflow.com/a/32817857/5041911">CSS – Stop text from overflowing</a></li>
<li><a href="https://stackoverflow.com/a/21743006/5041911">Checking for null or empty with Jinja2</a></li>
<li><a href="https://stackoverflow.com/a/41791375/5041911">Trimming strings with Jinja2</a></li>
<li><a href="https://stackoverflow.com/a/35777386/5041911">Removing unnecessary white space from Jinja rendered template</a></li></ul>

<p><em>Tags: <a href="https://devblog.dinobansigan.com/tag:SiteUpdates" class="hashtag"><span>#</span><span class="p-category">SiteUpdates</span></a> <a href="https://devblog.dinobansigan.com/tag:Bookmarks" class="hashtag"><span>#</span><span class="p-category">Bookmarks</span></a> <a href="https://devblog.dinobansigan.com/tag:Glitch" class="hashtag"><span>#</span><span class="p-category">Glitch</span></a> <a href="https://devblog.dinobansigan.com/tag:Python" class="hashtag"><span>#</span><span class="p-category">Python</span></a></em></p>

<p><strong><a href="https://remark.as/p/devblog.dinobansigan.com/search-page-up-and-running">Discuss...</a></strong> or leave a comment below.</p>
]]></content:encoded>
      <guid>https://devblog.dinobansigan.com/search-page-up-and-running</guid>
      <pubDate>Fri, 13 Dec 2019 23:15:38 +0000</pubDate>
    </item>
  </channel>
</rss>