<?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: John Pinto</title>
    <description>The latest articles on DEV Community by John Pinto (@johnpinto).</description>
    <link>https://dev.to/johnpinto</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%2F1014544%2F8d79d174-c909-4bf7-b865-0d0afefb7e50.gif</url>
      <title>DEV Community: John Pinto</title>
      <link>https://dev.to/johnpinto</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/johnpinto"/>
    <language>en</language>
    <item>
      <title>Updated scenestamps post</title>
      <dc:creator>John Pinto</dc:creator>
      <pubDate>Fri, 20 Dec 2024 20:13:44 +0000</pubDate>
      <link>https://dev.to/johnpinto/updated-scenestamps-post-leo</link>
      <guid>https://dev.to/johnpinto/updated-scenestamps-post-leo</guid>
      <description>&lt;div class="ltag__link"&gt;
  &lt;a href="/johnpinto" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__pic"&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1014544%2F8d79d174-c909-4bf7-b865-0d0afefb7e50.gif" alt="johnpinto"&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="https://dev.to/johnpinto/scenestamps-movie-scenes-and-quotes-database-76n" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__content"&gt;
      &lt;h2&gt;Scenestamps: Your Cinephile Community&lt;/h2&gt;
      &lt;h3&gt;John Pinto ・ Jul 4 '24&lt;/h3&gt;
      &lt;div class="ltag__link__taglist"&gt;
        &lt;span class="ltag__link__tag"&gt;#webdev&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#database&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#flask&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#sqlite&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
&lt;/div&gt;


</description>
      <category>webdev</category>
    </item>
    <item>
      <title>Scenestamps: Your Cinephile Community</title>
      <dc:creator>John Pinto</dc:creator>
      <pubDate>Thu, 04 Jul 2024 15:32:45 +0000</pubDate>
      <link>https://dev.to/johnpinto/scenestamps-movie-scenes-and-quotes-database-76n</link>
      <guid>https://dev.to/johnpinto/scenestamps-movie-scenes-and-quotes-database-76n</guid>
      <description>&lt;p&gt;Remember that scene in The Dark Knight where the Joker makes a pencil disappear? Or that heartbreaking moment in Up that tells a love story in just a few minutes? We all have those movie moments etched in our memories—scenes that made us laugh, cry, or sit at the edge of our seats. But finding these exact moments when you want to revisit them or share them with friends? That's been surprisingly difficult. Until now.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Scenestamps?
&lt;/h2&gt;

&lt;p&gt;Scenestamps is a new platform that revolutionizes how we discover, share, and discuss specific scenes from movies and TV shows. Think of it as a combination of IMDB's comprehensive database and Letterboxd's social features, but focused on individual scenes rather than entire movies.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Scenes Matter
&lt;/h2&gt;

&lt;p&gt;Movies and TV shows are more than just complete works—they're collections of moments that resonate with us personally. Sometimes it's a powerful monologue that struck a chord, a visually stunning sequence that left us in awe, or a subtle character interaction that perfectly captured an emotion. These scenes become part of our cultural conversation, our reference points, and our shared experiences.&lt;/p&gt;

&lt;h2&gt;
  
  
  How Scenestamps Works
&lt;/h2&gt;

&lt;p&gt;At its core, Scenestamps provides exact timestamps for scenes across different streaming platforms, along with detailed information about each scene. When you find a scene you're interested in, you get:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Precise timestamps to locate the scene in any version of the movie&lt;/li&gt;
&lt;li&gt;A detailed summary of what happens in the scene&lt;/li&gt;
&lt;li&gt;User discussions and comments&lt;/li&gt;
&lt;li&gt;Related scenes and recommendations&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  More Than Just Timestamps
&lt;/h2&gt;

&lt;p&gt;But Scenestamps isn't just a technical tool—it's a community platform for movie and TV enthusiasts. You can:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Create lists of your favorite scenes, movies, tvshows, celebs and quotes&lt;/li&gt;
&lt;li&gt;Share scenes with other users&lt;/li&gt;
&lt;li&gt;Write reviews and analyses&lt;/li&gt;
&lt;li&gt;Engage in discussions about specific moments&lt;/li&gt;
&lt;li&gt;Follow other users with similar tastes&lt;/li&gt;
&lt;li&gt;Discover new content through scene recommendations&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  For Every Kind of Movie Lover
&lt;/h2&gt;

&lt;p&gt;Whether you're a casual viewer or a serious cinephile, Scenestamps has something for you. Film students can use it to study specific sequences. Critics can reference exact moments in their reviews. Friends can share their favorite scenes with each other. Teachers can easily find relevant clips for their classes. The possibilities are endless.&lt;/p&gt;

&lt;h2&gt;
  
  
  Cross-Platform Freedom
&lt;/h2&gt;

&lt;p&gt;Unlike platform-specific features, Scenestamps works across all streaming services. Found a great scene on Netflix? Want to reference something from Prime Video? Looking for that perfect moment from HBO Max? Scenestamps brings it all together in one place.&lt;/p&gt;

&lt;h2&gt;
  
  
  Join the Scene Revolution
&lt;/h2&gt;

&lt;p&gt;We're building something special at Scenestamps—a place where movie moments come alive through community engagement and precise organization. It's about making those perfect cinematic moments more accessible, shareable, and discoverable.&lt;/p&gt;

&lt;p&gt;Movies and TV shows have evolved. The way we watch them has changed. Isn't it time the way we find and share our favorite scenes evolved too?&lt;/p&gt;

&lt;p&gt;Visit &lt;a href="https://scenestamps.com" rel="noopener noreferrer"&gt;scenestamps.com&lt;/a&gt; to start discovering and sharing your favorite movie moments today.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Scenestamps is currently in its growing phase, with an active community of movie enthusiasts already using the platform to discover and share their favorite scenes. Join us in shaping the future of how we experience and share the movies we love.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>database</category>
      <category>flask</category>
      <category>sqlite</category>
    </item>
    <item>
      <title>Nostrdev</title>
      <dc:creator>John Pinto</dc:creator>
      <pubDate>Sun, 25 Jun 2023 14:26:05 +0000</pubDate>
      <link>https://dev.to/johnpinto/nostrdev-235j</link>
      <guid>https://dev.to/johnpinto/nostrdev-235j</guid>
      <description>&lt;p&gt;This application presents capabilities of the new &lt;a href="https://github.com/swentel/nostr-php/" rel="noopener noreferrer"&gt;Nostr-PHP library&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Generate Key Pair
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdpil7ugjdp7ite10bmaw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdpil7ugjdp7ite10bmaw.png" alt="key" width="800" height="734"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Add relays
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmdvycmt7klywziw0dij1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmdvycmt7klywziw0dij1.png" alt="relay" width="800" height="270"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Github : &lt;a href="https://github.com/pj8912/nostrdev" rel="noopener noreferrer"&gt;https://github.com/pj8912/nostrdev&lt;/a&gt;&lt;/p&gt;

</description>
      <category>nostr</category>
      <category>php</category>
      <category>sql</category>
      <category>protocol</category>
    </item>
    <item>
      <title>Blog Automation using Python🐍&amp; Blogger</title>
      <dc:creator>John Pinto</dc:creator>
      <pubDate>Thu, 22 Jun 2023 08:46:21 +0000</pubDate>
      <link>https://dev.to/johnpinto/blog-automation-using-python-blogger-21ic</link>
      <guid>https://dev.to/johnpinto/blog-automation-using-python-blogger-21ic</guid>
      <description>&lt;p&gt;I was wondering what are the things I could automate with python. &lt;/p&gt;

&lt;p&gt;I know A LOT! 😝😝&lt;/p&gt;

&lt;p&gt;🧐 How about &lt;code&gt;movies??&lt;/code&gt; &lt;/p&gt;

&lt;p&gt;I had nothing specific in mind, but I know I could build something. &lt;/p&gt;

&lt;p&gt;We all use &lt;code&gt;Wikipedia&lt;/code&gt; a lot for many topics and movies being one of them , an idea clicked.&lt;/p&gt;

&lt;p&gt;I'd like reading movie plots alot why not scrape the &lt;code&gt;Plot&lt;/code&gt; section of the movie articles and build a website to read only movie plots?? &lt;/p&gt;

&lt;p&gt;Felt like doing something creative is a good exercise, but what movies?? &lt;/p&gt;

&lt;p&gt;With the Wikipedia a part already figured out, luckily I discovered python package for &lt;code&gt;IMDb&lt;/code&gt;. So there is a module to fetch &lt;code&gt;top200&lt;/code&gt; movies list from IMDb using python.&lt;/p&gt;

&lt;p&gt;Now &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;wikipedia(data scraping, python package, api)&lt;/li&gt;
&lt;li&gt;imdb(python package)
What about the website??&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I'm not gonna spend $$$ for my side-project that much, instead decided to use &lt;code&gt;bloggerAPI&lt;/code&gt; service, which allows use to create free blog websites with Google. &lt;/p&gt;

&lt;p&gt;I can create a blogger website with a click and use it's API to upload posts.&lt;/p&gt;

&lt;p&gt;🎞🎞🎞🎞🎞🎞🎞🎞🎞🎞🎞🎞🎞🎞🎞🎞🎞🎞🎞&lt;/p&gt;

&lt;h2&gt;
  
  
  Workflow
&lt;/h2&gt;

&lt;p&gt;It's very simple:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Fetch &lt;code&gt;top200&lt;/code&gt; movie title list&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;For each movie title, check if the title has topic &lt;code&gt;"movie"&lt;/code&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;If yes, get the article(url+python) from wikipedia, and scrape the data between &lt;code&gt;Plot&lt;/code&gt; section and the &lt;code&gt;Cast&lt;/code&gt; section. I said between Plot and cast since the html structure of Wikipedia articles makes it difficult scrape the particular section but, since all the movies articles almost follow the same pattern, that is the decision I made. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Finally, bloggerAPI. Nothing special here:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Create a project in the Google API Console&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;Enable&lt;/code&gt; the &lt;code&gt;Blogger API&lt;/code&gt; for your project &lt;/li&gt;
&lt;li&gt;Create an &lt;code&gt;API key&lt;/code&gt; and &lt;code&gt;OAuth 2.0 Client ID&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;

&lt;p&gt;That's it! Run the script which will take care of the rest.&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;Blogger Website&lt;/code&gt; :  &lt;a href="https://movieplotzz.blogspot.com/" rel="noopener noreferrer"&gt;https://movieplotzz.blogspot.com/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here is the &lt;code&gt;github&lt;/code&gt; : &lt;a href="https://github.com/pj8912/wiki-blog-automation" rel="noopener noreferrer"&gt;https://github.com/pj8912/wiki-blog-automation&lt;/a&gt; clone it and follow the instructions to automate the process of creating your own movie plots website and have fun! 😉&lt;/p&gt;

</description>
      <category>imdb</category>
      <category>wikipedia</category>
      <category>blogger</category>
      <category>python</category>
    </item>
    <item>
      <title>How @shnai0 built her first Open Source project with ChatGPT and Next.js. 10k users in 24 hours 🤯</title>
      <dc:creator>John Pinto</dc:creator>
      <pubDate>Mon, 19 Jun 2023 15:13:03 +0000</pubDate>
      <link>https://dev.to/johnpinto/how-shnai0-built-her-first-open-source-project-with-chatgpt-and-nextjs-10k-users-in-24-hours-2hi</link>
      <guid>https://dev.to/johnpinto/how-shnai0-built-her-first-open-source-project-with-chatgpt-and-nextjs-10k-users-in-24-hours-2hi</guid>
      <description>&lt;p&gt;&lt;a href="https://dev.to/shnai0/how-i-build-my-first-open-source-project-with-chatgpt-and-nextjs-10k-users-in-24-hours-2m7n"&gt;Blog Link&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>File uploading in Flask</title>
      <dc:creator>John Pinto</dc:creator>
      <pubDate>Thu, 01 Jun 2023 14:09:11 +0000</pubDate>
      <link>https://dev.to/johnpinto/file-uploading-in-flask-4gb</link>
      <guid>https://dev.to/johnpinto/file-uploading-in-flask-4gb</guid>
      <description>&lt;p&gt;I've used two ways of uploading files &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;only directly to folder&lt;/li&gt;
&lt;li&gt;directly into database from a folder&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Upload to a folder
&lt;/h3&gt;

&lt;p&gt;You can choose the folder of your choice to receive uploaded files, here in my project when a file is uploaded the file is taken , sperated by extension, rename the file to current timestamp and upload the file to folder and the name to the database. The file is only saved in the folder.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;app = Flask(__name__, static_folder='uploads')
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdn8vd8s4six9qmsthamp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdn8vd8s4six9qmsthamp.png" alt="folderImage" width="800" height="189"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So the file into the folder and the name to the database.&lt;/p&gt;

&lt;h3&gt;
  
  
  Upload to database from a folder
&lt;/h3&gt;

&lt;p&gt;So if you wanna a directly upload any file to the database, you need to save it as &lt;code&gt;BLOB&lt;/code&gt;.&lt;br&gt;
File size by MySQL type:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;TINYBLOB 255 bytes = 0.000255 Mb
BLOB 65535 bytes = 0.0655 Mb
MEDIUMBLOB 16777215 bytes = 16.78 Mb
LONGBLOB 4294967295 bytes = 4294.97 Mb =4.295 G
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So basically you'd have to convert the file into binary form and then upload it to the database.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;def convertToBinaryData(filename):
    with open(filename, 'rb') as file:
        binaryData = file.read()
    return binaryData
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Eventhough we are saving the file directly into the database we are forced to assign a location of file upload as same as the previous method. If you don't, flask will throw a error such as &lt;code&gt;No such filename as filename.type&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5jqent248z4357ssqkex.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5jqent248z4357ssqkex.png" alt="Imagesx" width="800" height="237"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So we follow the same steps as before,and we add a step in converting the uploaded file to binary and upload the file and the file's name to the database.&lt;/p&gt;

&lt;p&gt;You can delete the file from the folder after upload to the database if you want to. &lt;/p&gt;

&lt;p&gt;Please check if the upload works!!&lt;/p&gt;

&lt;p&gt;Here's the view of the &lt;code&gt;BLOB&lt;/code&gt; file and their names in the mysql database&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpmz0cjem1gg4xnwv9t4n.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpmz0cjem1gg4xnwv9t4n.png" alt="Image-database" width="800" height="98"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Give it a shot and enjoy!! THANKS!&lt;/p&gt;




&lt;h2&gt;
  
  
  Project Installation
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Requirements
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Python &lt;code&gt;3.10.6&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Install
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;clone
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git clone https://github.com/pj8912/flask-file-upload.git
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Create &lt;code&gt;virtual environment&lt;/code&gt; and &lt;strong&gt;activate&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Install requirements&lt;br&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;pip install -r requirements.txt
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Configuration
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;I used &lt;code&gt;mysql&lt;/code&gt; database for this project&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;create an &lt;code&gt;.env&lt;/code&gt; and add appropiate values for your mysql setup &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;.env&lt;/code&gt; variables : &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;DB_HOST=&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;DB_USERNAME=&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;DB_PWD=&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;DB_NAME=file-test&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;

&lt;p&gt;Host, username, password and database name&lt;/p&gt;

&lt;p&gt;My &lt;strong&gt;database name&lt;/strong&gt; is &lt;strong&gt;&lt;code&gt;file-test&lt;/code&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;SQL file&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;em&gt;Import&lt;/em&gt; sql file from &lt;strong&gt;&lt;code&gt;mysql/file-test.sql&lt;/code&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Run
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;python app.py
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>python</category>
      <category>flask</category>
      <category>mysql</category>
      <category>cloudstorage</category>
    </item>
    <item>
      <title>Publish/Subscribe Model</title>
      <dc:creator>John Pinto</dc:creator>
      <pubDate>Tue, 30 May 2023 09:29:10 +0000</pubDate>
      <link>https://dev.to/johnpinto/publishsubscribe-model-2d6p</link>
      <guid>https://dev.to/johnpinto/publishsubscribe-model-2d6p</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo25oes6tiooe5zwncbnw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo25oes6tiooe5zwncbnw.png" alt=" " width="720" height="509"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What is publish/subscribe (pub/sub) model ?
&lt;/h2&gt;

&lt;p&gt;The publish/subscribe (pub/sub) model is a messaging pattern in which publishers send messages to a message broker, and subscribers express interest in receiving certain messages. The message broker is responsible for delivering the messages to the subscribed clients.&lt;/p&gt;

&lt;p&gt;In the pub/sub model, publishers and subscribers are decoupled, meaning that they do not need to be aware of each other’s existence in order to communicate. This allows for a more flexible and scalable system, as publishers and subscribers can be added or removed without affecting the others.&lt;/p&gt;

&lt;p&gt;Pub/sub systems can be implemented using a variety of technologies, such as message queues, event buses, and topic-based publish/subscribe systems. They are commonly used in distributed systems, microservices architectures, and event-driven architectures.&lt;/p&gt;

&lt;h2&gt;
  
  
  What are ‘topics’ in pub/sub?
&lt;/h2&gt;

&lt;p&gt;In a publish/subscribe system, topics are used to categorize messages and allow subscribers to express interest in specific types of messages.&lt;/p&gt;

&lt;p&gt;In a topic-based publish/subscribe system, publishers send messages to specific topics, and subscribers express interest in one or more topics. The message broker is responsible for delivering the messages to the subscribed clients.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgwvs4ifechwozjw6crz2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgwvs4ifechwozjw6crz2.png" alt=" " width="720" height="509"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For example, in a news publishing system, there may be topics for different categories of news, such as politics, sports, and entertainment. Subscribers can express interest in receiving messages from specific topics, such as only sports and entertainment. When a publisher sends a message to the sports topic, it will be delivered to all subscribers interested in that topic.&lt;/p&gt;

&lt;p&gt;Using topics allows for more fine-grained control over the messages that are delivered to subscribers, as they can choose to receive only the messages that are relevant to them. It also allows for a more scalable system, as publishers and subscribers do not need to be aware of each other’s specific identities.&lt;/p&gt;

&lt;h2&gt;
  
  
  Events in pub/sub
&lt;/h2&gt;

&lt;p&gt;Events are messages that are published by a publisher and delivered to subscribed clients.&lt;/p&gt;

&lt;p&gt;An event is typically a notification of something that has happened or is about to happen. It can contain data about the event, such as the event type, a description, and any relevant details.&lt;/p&gt;

&lt;p&gt;In an event-driven architecture, events are used to trigger actions or behaviors in other parts of the system. For example, an event might be used to notify a service that a new user has signed up, or that a payment has been processed. The service can then respond to the event by performing some action, such as sending a welcome email or updating a database.&lt;/p&gt;

&lt;p&gt;Using events allows for a more flexible and scalable system, as publishers and subscribers do not need to be directly coupled and can communicate asynchronously. It also allows for a more decoupled and modular system, as components can respond to events without the need to be aware of the specific identities of the publishers.&lt;/p&gt;

&lt;h2&gt;
  
  
  Event Bus
&lt;/h2&gt;

&lt;p&gt;An event bus is a messaging system that allows publishers to send events to subscribers. It is a type of publish/subscribe system that is commonly used in event-driven architectures.&lt;/p&gt;

&lt;p&gt;In an event bus, events are published to a central message broker, which is responsible for delivering the events to the subscribed clients. Subscribers express interest in receiving events by registering with the event bus and specifying a list of events that they want to receive.&lt;/p&gt;

&lt;h2&gt;
  
  
  Example of pub/sub model in python
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Example1: Basic publish/subscribe model implemented using Python’s built-in &lt;code&gt;queue&lt;/code&gt; module:
&lt;/h3&gt;

&lt;p&gt;Here the &lt;code&gt;Publisher&lt;/code&gt; class has a message queue and a list of subscribers. When a message is published using the &lt;code&gt;publish&lt;/code&gt; method, it is added to the queue and delivered to all subscribed clients by calling their &lt;code&gt;receive&lt;/code&gt; method. The &lt;code&gt;Subscriber&lt;/code&gt; class has a &lt;code&gt;receive&lt;/code&gt; method that simply prints the received message.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import queue

class Publisher:
    def __init__(self):
        self.message_queue = queue.Queue()
        self.subscribers = []

    def subscribe(self, subscriber):
        self.subscribers.append(subscriber)

    def publish(self, message):
        self.message_queue.put(message)
        for subscriber in self.subscribers:
            subscriber.receive(message)

class Subscriber:
    def __init__(self, name):
        self.name = name

    def receive(self, message):
        print(f"{self.name} received message: {message}")

# Example usage
publisher = Publisher()

subscriber_1 = Subscriber("Subscriber 1")
subscriber_2 = Subscriber("Subscriber 2")

publisher.subscribe(subscriber_1)
publisher.subscribe(subscriber_2)

publisher.publish("Hello World")
# Output:
# "Subscriber 1 received message: Hello World"
# "Subscriber 2 received message: Hello World"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Example2: Publish/Subscribe model implemented using Python’s threading module, the Event class, and a dictionary to store subscribers by topic :
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import threading

class Publisher:
    def __init__(self):
        self.subscribers = {}

    def subscribe(self, subscriber, topic):
        if topic not in self.subscribers:
            self.subscribers[topic] = []
        self.subscribers[topic].append(subscriber)

    def publish(self, message, topic):
        if topic in self.subscribers:
            for subscriber in self.subscribers[topic]:
                subscriber.event.set()
                subscriber.message = message

class Subscriber:
    def __init__(self, name):
        self.name = name
        self.event = threading.Event()
        self.message = None

    def receive(self):
        self.event.wait()
        print(f"{self.name} received message: {self.message}")
        self.event.clear()

# Example usage
publisher = Publisher()

subscriber_1 = Subscriber("Subscriber 1")
subscriber_2 = Subscriber("Subscriber 2")
subscriber_3 = Subscriber("Subscriber 3")

publisher.subscribe(subscriber_1, "sports")
publisher.subscribe(subscriber_2, "entertainment")
publisher.subscribe(subscriber_3, "sports")

publisher.publish("Soccer match result", "sports")
# Output:
# "Subscriber 1 received message: Soccer match result"
# "Subscriber 3 received message: Soccer match result
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, the Publisher class has a dictionary of subscribers, where the keys are topics and the values are lists of subscribers. The subscribe method adds a subscriber to the list for the specified topic. The publish method checks if there are any subscribers for the specified topic and, if there are, sets the event and stores the message for each subscriber. The Subscriber class and receive method are the same as in the previous example.&lt;/p&gt;

&lt;p&gt;This implementation allows subscribers to express interest in specific topics and receive only the messages that are relevant to them. It also allows the publisher to publish messages to specific topics without needing to be aware of the specific identities of the subscribers.&lt;/p&gt;

</description>
      <category>pubsub</category>
      <category>distributedsystems</category>
      <category>messagingpattern</category>
      <category>microservices</category>
    </item>
    <item>
      <title>php-bard-api</title>
      <dc:creator>John Pinto</dc:creator>
      <pubDate>Thu, 18 May 2023 07:02:25 +0000</pubDate>
      <link>https://dev.to/johnpinto/php-bard-api-5867</link>
      <guid>https://dev.to/johnpinto/php-bard-api-5867</guid>
      <description>&lt;h2&gt;
  
  
  php-bard-api
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;A package that returns Response of Google Bard through API&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  Prerequisites
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;PHP 8.1&lt;/li&gt;
&lt;li&gt;composer&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Install
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; composer require pj8912/php-bard-api
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Usage
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;?php
require_once 'vendor/autoload.php';
use Pj8912\PhpBardApi\Bard;

$_ENV['_BARD_API_KEY'] = "Your Key";

$bard = new Bard();
$input_text = "Hello, Bard!";  // Input text for the conversation
$result = $bard-&amp;gt;get_answer($input_text);  

// Access the result data
$conversation_id = $result["conversation_id"];
$response_id = $result["response_id"];
$factualityQueries = $result["factualityQueries"];
$textQuery = $result["textQuery"];
$choices = $result["choices"];

// reply for query 
$content = $result["content"];
print($content);
?&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Github
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://github.com/pj8912/php-bard-api" rel="noopener noreferrer"&gt;https://github.com/pj8912/php-bard-api&lt;/a&gt;&lt;/p&gt;

</description>
      <category>php</category>
      <category>bard</category>
      <category>ai</category>
      <category>library</category>
    </item>
    <item>
      <title>Terminal Chat with Bard using bardAPI and Python</title>
      <dc:creator>John Pinto</dc:creator>
      <pubDate>Tue, 16 May 2023 11:51:51 +0000</pubDate>
      <link>https://dev.to/johnpinto/terminal-chat-with-bard-using-bardapi-and-python-5h5b</link>
      <guid>https://dev.to/johnpinto/terminal-chat-with-bard-using-bardapi-and-python-5h5b</guid>
      <description>&lt;p&gt;So I took a look at &lt;code&gt;BardAPI&lt;/code&gt; on Github and built a simple terminal chat using python&lt;/p&gt;

&lt;p&gt;BardAPI : &lt;a href="https://github.com/dsdanielpark/Bard-API" rel="noopener noreferrer"&gt;https://github.com/dsdanielpark/Bard-API&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;My Github : &lt;a href="https://github.com/pj8912/terminal_chat" rel="noopener noreferrer"&gt;https://github.com/pj8912/terminal_chat&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Get the key as per the instruction on &lt;a href="https://github.com/dsdanielpark/Bard-API" rel="noopener noreferrer"&gt;BARDAPI&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Create a &lt;code&gt;.env&lt;/code&gt; on the root folder and assign that value &lt;code&gt;BARD_API_KEY&lt;/code&gt; variable&lt;/li&gt;
&lt;/ul&gt;

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



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import os
from dotenv import load_dotenv
from bardapi import Bard
load_dotenv()
os.environ['_BARD_API_KEY'] = os.getenv("BARD_API_KEY")
bard = Bard()
print('\n','*'*50,'Terminal Chat with BARD','*'*50, '\n')
try:
    while True:
        user_input = input('\U0001F464 You: ')
        print('')
        print('\U0001F916 Bard:', bard.get_answer(user_input.strip())['content'])
        print('-'*100, "\n")
except KeyboardInterrupt:
    print('Ended Chat!')
except:
    print('Ended Chat!')
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As per the documentation the &lt;code&gt;os.environ['_BARD_API_KEY']&lt;/code&gt; is assigned the your BARD_API_KEY &lt;/p&gt;




&lt;h2&gt;
  
  
  Run
&lt;/h2&gt;

&lt;p&gt;Run the script to start chatting with &lt;code&gt;Bard&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ python app.py
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fil96nfsllmjtn90v1fd3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fil96nfsllmjtn90v1fd3.png" alt="Image" width="800" height="309"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  ENJOY!
&lt;/h2&gt;

</description>
      <category>bard</category>
      <category>ai</category>
      <category>python</category>
      <category>chatgpt</category>
    </item>
    <item>
      <title>Lokalnotes - onBrowser notesapp</title>
      <dc:creator>John Pinto</dc:creator>
      <pubDate>Tue, 09 May 2023 15:42:54 +0000</pubDate>
      <link>https://dev.to/johnpinto/lokalnotes-53bm</link>
      <guid>https://dev.to/johnpinto/lokalnotes-53bm</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fstb483nauxb4i4lhlc10.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fstb483nauxb4i4lhlc10.png" alt="LockalNotes website" width="800" height="360"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A &lt;strong&gt;notesapp&lt;/strong&gt; that stores &lt;strong&gt;notes&lt;/strong&gt; &lt;strong&gt;on&lt;/strong&gt; your &lt;strong&gt;browser&lt;/strong&gt;. &lt;strong&gt;&lt;a href="https://lokalnotes.com" rel="noopener noreferrer"&gt;Lokalnotes&lt;/a&gt;&lt;/strong&gt; uses &lt;code&gt;localStorage&lt;/code&gt; to store the notes data on your localStorage.&lt;/p&gt;

&lt;p&gt;This will stay on your browser and will be cleared when you chose to do it manually or enabled during your browser history deletion. So it's up to you whether it stays on the browser&lt;/p&gt;

&lt;h2&gt;
  
  
  Why browser?
&lt;/h2&gt;

&lt;p&gt;We have seen many notes application(online/offlie) and I have &lt;a href="https://github.com/pj8912/notesapp-php" rel="noopener noreferrer"&gt;built one&lt;/a&gt; myself using &lt;code&gt;PHP&lt;/code&gt; and &lt;code&gt;SQLite&lt;/code&gt; so offline and on-disk storage. These are somewhat created to manage multiple features including media. These note-taking apps can't considered for &lt;em&gt;quick&lt;/em&gt; and &lt;em&gt;easy&lt;/em&gt; to use.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://lokalnotes.com" rel="noopener noreferrer"&gt;Lokalnotes&lt;/a&gt; is a &lt;strong&gt;lightweight&lt;/strong&gt; and effective solution for managing  your notes directly in your browser. &lt;/p&gt;

&lt;p&gt;It's &lt;strong&gt;private&lt;/strong&gt;, &lt;strong&gt;no registration&lt;/strong&gt; required and &lt;em&gt;very very easy&lt;/em&gt; to &lt;strong&gt;create&lt;/strong&gt; and &lt;strong&gt;export&lt;/strong&gt; as a &lt;code&gt;.txt&lt;/code&gt; file.&lt;/p&gt;

&lt;h2&gt;
  
  
  Working and Features
&lt;/h2&gt;

&lt;p&gt;In Lokalnotes we can,&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Create new note&lt;/li&gt;
&lt;li&gt;Delete all notes&lt;/li&gt;
&lt;li&gt;Copy a note&lt;/li&gt;
&lt;li&gt;Download a note &lt;/li&gt;
&lt;li&gt;Delete a note&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Create Note
&lt;/h3&gt;

&lt;p&gt;When you create a note, a item &lt;code&gt;notesData&lt;/code&gt; is set in localstorage and the values are stored as &lt;code&gt;json&lt;/code&gt; converted to string.&lt;/p&gt;

&lt;p&gt;We leverage this to create multiple notes as values for a single localstorage key, since data in localstorage are stored as key-value pairs.&lt;/p&gt;




&lt;h4&gt;
  
  
  LocalStorage
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;key : notesData, 
value : {"1683644984302": "hi", "1683644984469": "bye"}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;When a note is created the &lt;strong&gt;note name&lt;/strong&gt; is &lt;strong&gt;current timestamp&lt;/strong&gt;. So we can create, read, update and delete a note the same we would if we use a database.&lt;/p&gt;




&lt;h3&gt;
  
  
  Write and Save Note
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkkhen22hav9020rx2c9m.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkkhen22hav9020rx2c9m.png" alt="Textarea to write" width="800" height="360"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fipvvup4gc4njy3jcwqmy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fipvvup4gc4njy3jcwqmy.png" alt="Note highlight" width="800" height="373"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A &lt;code&gt;textarea&lt;/code&gt; will &lt;strong&gt;open&lt;/strong&gt; up at the side when you &lt;strong&gt;click&lt;/strong&gt; on the &lt;strong&gt;notename&lt;/strong&gt;. The clicked &lt;strong&gt;notename&lt;/strong&gt; will be in &lt;code&gt;bold&lt;/code&gt; and background converted to &lt;code&gt;whitesmoke&lt;/code&gt; to highlight the current note you are working on.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9zjbcu6pyjqpl02wvyqg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9zjbcu6pyjqpl02wvyqg.png" alt="Save the note" width="800" height="360"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Click &lt;strong&gt;'Save Note'&lt;/strong&gt; button to save. You can see the &lt;em&gt;'Note Saved'&lt;/em&gt; message at the sidenav.&lt;/p&gt;

&lt;p&gt;You can also check the &lt;code&gt;localStorage&lt;/code&gt; to look at your stored notes 👇&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxs98xjbky4akwiosf5wu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxs98xjbky4akwiosf5wu.png" alt="Copy note" width="800" height="360"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h3&gt;
  
  
  Copy and Download
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Copy
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuevk51j3pte737709cub.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuevk51j3pte737709cub.png" alt="Notes Copied" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Foreach note created, we can copy the contents of the note by clicking the copy icon.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fecyoyrjr9y6eato4y28n.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fecyoyrjr9y6eato4y28n.png" alt="copy confirmed" width="800" height="360"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can see a popup message confirming that the contents of the note are copied to the clipboard.&lt;/p&gt;

&lt;h4&gt;
  
  
  Download
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnhfrpygdjbz2e6x1evbk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnhfrpygdjbz2e6x1evbk.png" alt="Download file" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For download, the contents of that note will be downloaded as a .txt file with the notename as the filename. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg3bgv3my7ltcvwsausit.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg3bgv3my7ltcvwsausit.png" alt="Downloaded file" width="800" height="398"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Example :&lt;br&gt;
&lt;code&gt;value : {"1683644984302": "hi",...&lt;/code&gt;&lt;br&gt;
will be downloaded as &lt;code&gt;1683644984302.txt&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Techonolgies used
&lt;/h2&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;/ul&gt;

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

&lt;p&gt;Start using LokalNotes today and experience a hassle-free note-taking experience right in your favorite web browser.&lt;/p&gt;

</description>
      <category>notesapp</category>
      <category>javascript</category>
      <category>website</category>
      <category>localstorage</category>
    </item>
  </channel>
</rss>
