<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Javascript on Nicole van der Hoeven</title><link>https://nicolevanderhoeven.com/tags/javascript/</link><description>Recent content in Javascript on Nicole van der Hoeven</description><generator>Hugo -- gohugo.io</generator><language>en-us</language><copyright>Nicole van der Hoeven</copyright><lastBuildDate>Fri, 07 Apr 2023 13:00:42 +0100</lastBuildDate><atom:link href="https://nicolevanderhoeven.com/tags/javascript/index.xml" rel="self" type="application/rss+xml"/><item><title>k6 Javascript Ecosystem (k6 Office Hours #85)</title><link>https://nicolevanderhoeven.com/blog/20230407-koh85-k6-javascript-ecosystem/</link><pubDate>Fri, 07 Apr 2023 13:00:42 +0100</pubDate><guid>https://nicolevanderhoeven.com/blog/20230407-koh85-k6-javascript-ecosystem/</guid><description>&lt;p&gt;Did you know that there is a k6 JavaScript ecosystem on top of the Go extension ecosystem? What&amp;rsquo;s the difference between the two? What does k6 actually support? What types of things can you do with JavaScript? In this k6 Office Hours, Software Engineer and k6 maintainer Mihail Stoykov joins me to talk all about the different options for k6 available through JavaScript libraries.&lt;/p&gt;
&lt;div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"&gt;
&lt;iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/UZ-1yXd4xkk?autoplay=0&amp;amp;controls=1&amp;amp;end=0&amp;amp;loop=0&amp;amp;mute=0&amp;amp;start=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" title="YouTube video"&gt;&lt;/iframe&gt;
&lt;/div&gt;</description></item><item><title>Mastobot: a Mastodon Bot for Readwise and Obsidian</title><link>https://nicolevanderhoeven.com/blog/20221225-mastodon-bot-for-readwise-and-obsidian/</link><pubDate>Sun, 25 Dec 2022 00:31:28 +0000</pubDate><guid>https://nicolevanderhoeven.com/blog/20221225-mastodon-bot-for-readwise-and-obsidian/</guid><description>&lt;p&gt;I&amp;rsquo;ve had a love affair with &lt;a href="https://readwise.io/nicole"&gt;Readwise&lt;/a&gt; for a while, enough to write some code to extend it. I &lt;a href="https://nicolevanderhoeven.com/blog/20210206-readwise-to-obsidian/"&gt;wrote a Python script to save Readwise highlights to my Obsidian vault&lt;/a&gt;, switched to the &lt;a href="https://nicolevanderhoeven.com/blog/20210810-readwise-to-obsidian-redux/"&gt;Readwise Official plugin&lt;/a&gt; when they released it, &lt;a href="https://nicolevanderhoeven.com/blog/20210815-shortform-to-readwise/"&gt;wrote another script sending Shortform highlights to Readwise&lt;/a&gt;, and then was happy when the two companies established an official integration thanks to me introducing them.&lt;/p&gt;
&lt;p&gt;Maybe I should have learned to just be patient and wait for the awesome Readwise team to build integrations I want, but remembered I&amp;rsquo;m not that patient. This is about how I created a Mastodon bot to send Mastodon posts I like to my Readwise account, and, by extension, to my &lt;a href="https://obsidian.md/"&gt;Obsidian&lt;/a&gt; vault.&lt;/p&gt;
&lt;p&gt;You might say there&amp;rsquo;s a pattern here.&lt;/p&gt;
&lt;h2 id="the-problem"&gt;The problem&lt;/h2&gt;
&lt;p&gt;I&amp;rsquo;ve been dabbling in &lt;a href="https://joinmastodon.org/"&gt;Mastodon&lt;/a&gt; for a while, but only recently got extremely involved with it when I decided to start and maintain a Mastodon server, &lt;a href="https://pkm.social"&gt;pkm.social&lt;/a&gt;, for the personal knowledge management community.&lt;/p&gt;
&lt;p&gt;Readwise already has an awesome &lt;a href="https://youtu.be/Rw1L5sxlnuU?t=400"&gt;Twitter integration&lt;/a&gt; that I really enjoyed. Basically, once you&amp;rsquo;ve set it up, sending any tweet to &lt;a href="https://twitter.com/readwise"&gt;@readwise&lt;/a&gt; adds it to your Readwise account. This means that whenever someone says something actually meaningful or interesting on Twitter, I can make sure it gets sent to Readwise, and then from there to my notes in Obsidian.&lt;/p&gt;
&lt;p&gt;I wanted the same setup for Mastodon.&lt;/p&gt;
&lt;h2 id="the-result"&gt;The result&lt;/h2&gt;
&lt;p&gt;First, the end result: I managed to get Mastodon posts I send to my bot to be sent to my Readwise account. Here are some early posts in the &amp;ldquo;Tweets&amp;rdquo; section of my Readwise Library:&lt;/p&gt;
&lt;p&gt;&lt;img src="https://nicolevanderhoeven.com/assets/mastodon-on-readwise.png" alt="" loading="lazy" decoding="async"&gt;
&lt;/p&gt;
&lt;p&gt;And here are the resulting notes in Obsidian, also automatically synced and formatted:&lt;/p&gt;
&lt;p&gt;&lt;img src="https://nicolevanderhoeven.com/assets/mastodon-in-obsidian.png" alt="" loading="lazy" decoding="async"&gt;
&lt;/p&gt;
&lt;h2 id="the-solution"&gt;The solution&lt;/h2&gt;
&lt;p&gt;Next, here&amp;rsquo;s how to set it up.&lt;/p&gt;
&lt;h3 id="pre-requisites"&gt;Pre-requisites&lt;/h3&gt;
&lt;p&gt;You&amp;rsquo;ll need a few things to get started:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;A Mastodon account (I use and co-host &lt;a href="https://pkm.social"&gt;pkm.social&lt;/a&gt; for free)&lt;/li&gt;
&lt;li&gt;A Readwise account (&lt;a href="https://readwise.io/nicole"&gt;Here&amp;rsquo;s an affiliate link&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Familiarity with GitHub, the command line, Node.js (although I&amp;rsquo;m not a Node.js developer, so you don&amp;rsquo;t have to be, either)&lt;/li&gt;
&lt;li&gt;The willingness/ability to leave a Node.js script running on a server somewhere&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id="setup"&gt;Setup&lt;/h3&gt;
&lt;ol&gt;
&lt;li&gt;Clone &lt;a href="https://github.com/nicolevanderhoeven/mastobot"&gt;my Mastobot repository&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;In your Mastodon account settings, go to the Development section for your Mastodon server (e.g. &lt;code&gt;https://pkm.social/settings/applications&lt;/code&gt;) and click New Application.&lt;/li&gt;
&lt;li&gt;Fill in the application name (this can be anything you want), leave everything else the same, and then click Save Changes.&lt;/li&gt;
&lt;li&gt;Click on the application you just created, and note your client key, client secret, and access token. You&amp;rsquo;ll need these later.&lt;/li&gt;
&lt;li&gt;In this repository, copy the contents of &lt;code&gt;.env.sample&lt;/code&gt; to a new file called &lt;code&gt;.env&lt;/code&gt;.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;It should look like this:&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-javascript" data-lang="javascript"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#a6e22e"&gt;ACCESS_TOKEN&lt;/span&gt;&lt;span style="color:#f92672"&gt;=&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#a6e22e"&gt;CLIENT_SECRET&lt;/span&gt;&lt;span style="color:#f92672"&gt;=&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#a6e22e"&gt;CLIENT_KEY&lt;/span&gt;&lt;span style="color:#f92672"&gt;=&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#a6e22e"&gt;READWISE_TOKEN&lt;/span&gt;&lt;span style="color:#f92672"&gt;=&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#a6e22e"&gt;DOMAIN&lt;/span&gt;&lt;span style="color:#f92672"&gt;=&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;ol start="6"&gt;
&lt;li&gt;Fill out the fields in &lt;code&gt;.env&lt;/code&gt; with the information you just obtained from your Mastodon account.&lt;/li&gt;
&lt;li&gt;For the &lt;code&gt;READWISE_TOKEN&lt;/code&gt; field, enter your &lt;a href="https://readwise.io/access_token"&gt;Readwise access token&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;For the &lt;code&gt;DOMAIN&lt;/code&gt; field, enter your Mastodon server&amp;rsquo;s domain (e.g. &lt;code&gt;https://pkm.social&lt;/code&gt;).&lt;/li&gt;
&lt;li&gt;Run &lt;code&gt;npm install&lt;/code&gt; to install the dependencies.&lt;/li&gt;
&lt;li&gt;Run &lt;code&gt;node bot.js&lt;/code&gt; to start the bot.&lt;/li&gt;
&lt;li&gt;In Mastodon, find a post you like and reply to it with &lt;code&gt;@accountname Your comment here.&lt;/code&gt; Within a few minutes, the original post you replied to will be sent to your Readwise account as a highlight and your comment as a note.&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id="limitations"&gt;Limitations&lt;/h2&gt;
&lt;p&gt;This workflow is not without its limitations:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;You need to keep the script running somewhere to be able to use it. I considered using a polling approach, but decided I wanted to experiment with Mastodon&amp;rsquo;t streaming API, which would also be more responsive, so I went with that.&lt;/li&gt;
&lt;li&gt;Right now, because the bot takes environment variables about &lt;em&gt;your&lt;/em&gt; particular setup, it&amp;rsquo;s not as versatile as the official Twitter implementation. As it is, it&amp;rsquo;s for one person&amp;rsquo;s use only.&lt;/li&gt;
&lt;li&gt;It uses the &amp;ldquo;Tweets&amp;rdquo; category in Readwise, which is not ideal, but I can&amp;rsquo;t really do anything about that until they give Mastodon its own category. This isn&amp;rsquo;t really a big deal.&lt;/li&gt;
&lt;li&gt;Right now, the bot doesn&amp;rsquo;t support images or other media embedded to posts.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;I may address some of these issues, but for now, I&amp;rsquo;m just happy with the result. I fully expect that the Readwise team will eventually be able to flesh this out into a more robust integration, so I&amp;rsquo;m hesitant to spend too much more effort now that I&amp;rsquo;ve got it doing the minimum of what I wanted.&lt;/p&gt;
&lt;h2 id="resources"&gt;Resources&lt;/h2&gt;
&lt;p&gt;If you&amp;rsquo;re interested in doing this for yourself, here are some resources that might be useful:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="https://github.com/nicolevanderhoeven/mastobot"&gt;Mastobot on GitHub&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/vanita5/mastodon-api"&gt;Mastodon API client for NodeJS&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://docs.joinmastodon.org/api/"&gt;Mastodon official API&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Great video tutorial series by &lt;a href="https://www.youtube.com/watch?v=sKSxBd56H70"&gt;The Coding Train&lt;/a&gt; on creating a Mastodon bot&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;em&gt;Note: I&amp;rsquo;ve included affiliate links for &lt;a href="https://readwise.io/nicole"&gt;Readwise&lt;/a&gt; in this post, in accordance with my &lt;a href="https://nicolevanderhoeven.com/ethics/"&gt;Ethics Statement&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;</description></item><item><title>How to use Dataview and Templater to run JavaScript in Obsidian for automating task management</title><link>https://nicolevanderhoeven.com/blog/20220116-how-to-use-dataview-and-templater-to-run-javascript-in-obsidian/</link><pubDate>Sun, 16 Jan 2022 16:30:22 +0100</pubDate><guid>https://nicolevanderhoeven.com/blog/20220116-how-to-use-dataview-and-templater-to-run-javascript-in-obsidian/</guid><description>&lt;p&gt;TIL how to run JavaScript in @obsdmd. A friend of mine had an interesting use case: He had a long reading list from his studies, and wanted to use Obsidian to decide what he could read given a certain amount of time.&lt;/p&gt;
&lt;p&gt;TL;DR: &lt;a href="https://gist.github.com/nicolevanderhoeven/eccc6f910cdc48a5b7934b53a5a0f244"&gt;Here&amp;rsquo;s the script&lt;/a&gt;.
And here&amp;rsquo;s the end result:
&lt;img src="https://nicolevanderhoeven.com/assets/templater-demo.gif" alt="Gif of the full setup working" loading="lazy" decoding="async"&gt;
&lt;/p&gt;
&lt;p&gt;Requires: Obsidian. The Dataview and Templater plugins. Also requires a separate markdown page for every chapter or bite-sized section of the book or course, with the metadata &lt;code&gt;time_required&lt;/code&gt; in the YAML frontmatter.&lt;/p&gt;
&lt;p&gt;Why Dataview? Dataview can parse that frontmatter, grab the value for &lt;code&gt;time_required&lt;/code&gt;, and return a list of pages and links. There is a Dataview Query Language, but dataviewjs is more extensible.&lt;/p&gt;
&lt;p&gt;Why Templater? I initially wanted to write a script within a dataviewjs block, but:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Dataview results are only rendered in Preview mode (which I don&amp;rsquo;t spend much time in)&lt;/li&gt;
&lt;li&gt;I hate testing JavaScript within Obsidian.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Instead, I created a folder &lt;code&gt;scripts&lt;/code&gt; within my vault and selected it as the &amp;ldquo;user scripts folder&amp;rdquo; in Templater settings. Then, I created a script, &lt;code&gt;returnStudyOptions.js&lt;/code&gt;. &lt;a href="https://gist.github.com/nicolevanderhoeven/eccc6f910cdc48a5b7934b53a5a0f244"&gt;Here&amp;rsquo;s the gist for that&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;In a new note, I typed &lt;code&gt;&amp;lt;% tp.user.returnStudyOptions(tp, 60) %&amp;gt;&lt;/code&gt;. This line calls the script I created and also passes 60 minutes as the time available.&lt;/p&gt;
&lt;p&gt;I selected &amp;ldquo;Templater: Replace templates in the active file&amp;rdquo; from the Command Pane, which runs the script and replaces the line with the script&amp;rsquo;s returned value, which looks something like this:
&lt;img src="https://nicolevanderhoeven.com/assets/templater-result.png" alt="Screenshot of the notes returned by the script" loading="lazy" decoding="async"&gt;
&lt;/p&gt;
&lt;p&gt;I also assigned a hotkey to for replacing the template, for ease of use. That&amp;rsquo;s it! I thought this was a fun way to learn how to use JavaScript in Obsidian. Thanks to &lt;a href="https://twitter.com/ealameda"&gt;@ealameda&lt;/a&gt; for the use case!&lt;/p&gt;</description></item></channel></rss>