<?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: Jim Chan</title>
    <description>The latest articles on DEV Community by Jim Chan (@betterrunner).</description>
    <link>https://dev.to/betterrunner</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%2F715621%2F6ad4fda1-2b67-4d68-81ae-99e93d64aa83.jpeg</url>
      <title>DEV Community: Jim Chan</title>
      <link>https://dev.to/betterrunner</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/betterrunner"/>
    <language>en</language>
    <item>
      <title>Take notes on the web with their context</title>
      <dc:creator>Jim Chan</dc:creator>
      <pubDate>Wed, 29 Sep 2021 09:36:00 +0000</pubDate>
      <link>https://dev.to/betterrunner/take-notes-on-the-web-with-their-context-38j5</link>
      <guid>https://dev.to/betterrunner/take-notes-on-the-web-with-their-context-38j5</guid>
      <description>&lt;p&gt;I have developed a free open source chrome extension named &lt;a href="https://github.com/betterRunner/context-note"&gt;context-note&lt;/a&gt;, aiming to provide a better way to take, search and review notes on the web.&lt;br&gt;
Imaging we are browsing some websites and come across important information that we want to markdown, what would we do?&lt;br&gt;
We might properly copy the text and paste it to a cloud note-taking app (Evernote, Onenote, etc.) just like this:&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--VcVsLaMp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bd6sx7y3o6yki3amnk5y.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--VcVsLaMp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bd6sx7y3o6yki3amnk5y.png" alt="image"&gt;&lt;/a&gt;&lt;br&gt;
Several shortcomings comes into my mind:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;It could be &lt;strong&gt;cumbersome&lt;/strong&gt; and time-consuming: at least four operations (c&amp;amp;p the text, c&amp;amp;p the website link, write the note, c&amp;amp;p the image) need to be done to finish this single note.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Loss of context details&lt;/strong&gt;: when reviewing this note, you can only read the sentence and image instead of the whole page, useless you open the link and scroll to the exact place where you have token this note.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;By the way, another more easy method is simply clicking star ⭐ of the browser to throw the website link into the bookmark. As you can imagine, &lt;strong&gt;without the content and note information&lt;/strong&gt;, you basically can not remember why you marked down this link someday after two months.&lt;/p&gt;




&lt;p&gt;So I think a more efficient tool should be used during taking notes on the web, especially when you are reading articles or learning something new. That is why I built context-note.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://youtu.be/ZcakhGp_-HQ"&gt;https://youtu.be/ZcakhGp_-HQ&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It is a chrome extension with three key fetarues:&lt;br&gt;
📝 &lt;strong&gt;Notebook&lt;/strong&gt;, where text content, note itself and context information would be stored.&lt;br&gt;
🏷️ &lt;strong&gt;Tagbook&lt;/strong&gt;, manage the notes neatly with a handy tag system.&lt;br&gt;
⌨️ &lt;strong&gt;Rich text editor&lt;/strong&gt;: embed quill as the rich text editor.&lt;/p&gt;

&lt;p&gt;Taking notes with their context, I believe it would be a better way to &lt;strong&gt;store and review things that really matter to us&lt;/strong&gt;.&lt;/p&gt;

</description>
      <category>productivity</category>
      <category>vue</category>
      <category>javascript</category>
      <category>typescript</category>
    </item>
  </channel>
</rss>
