Posts tagged: javascript

javascript b64

2025-05-25T21:01:04Z

I’m currently [[replacing-google-search-apps-with-self-hosted-web-apps]] and decided to create a simple b64 encoder/decoder, just start typing to enter text, escape to deselect, then e/d to encode/decode.

I’m trying to make these apps super simple, self hosted out of minio, static html, and javascript. It’s been fun to get back to some simple interactive web development like this. No build just a website that does something. No broken builds, no containers to deploy, just push to minio.

encoded = btoa(content);
decoded = atob(encoded);

Here is the result.

💭 encodeURIComponent() - JavaScript | MDN

2023-07-28T14:59:37Z

encodeURIComponent() - JavaScript | MDN

The encodeURIComponent() function encodes a URI by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will ...

MDN Web Docs · developer.mozilla.org

In order to send data that includes special characters such as / in a url you need to url encode it. You have probably seen these many times in urls with things like %20 for spaces.

I’m working on a chrome extension to make quick blog posts, like thoughts or a persistent bookmark tool with comments. The backend is written in fastapi and when I check to see if I have a post for a page I need to url encode it.

curl -X 'GET' \
  'https://thoughts.waylonwalker.com/link/?link=https%3A%2F%2Fhtmx.org%2Fextensions%2Fclient-side-templates%2F' \
  -H 'accept: application/json'

curl example generated from the fastapi swagger docs.

Here is how I used javascript’s encodeURIComponent to turn my chrome extension into a notification when I already have a post for the current page.

// Event listener for tab changes
chrome.tabs.onActivated.addListener(function (activeInfo) {
  // Get the active tab information
  chrome.tabs.get(activeInfo.tabId, function (tab) {
    const url = tab.url || "";

    getData(`https://thoughts.waylonwalker.com/link/?link=${encodeURIComponent(url)}`).then((data) => {
        console.log('link data: ', data);
      if (data.hasOwnProperty('detail')) {
        chrome.browserAction.setBadgeText({ text: "" });
      } else {
        localStorageKey = `formData-${url}`;
        chrome.browserAction.setBadgeText({ text: "1" });
        chrome.browserAction.setBadgeBackgroundColor({ color: "#80A3D5" });
        localStorage.setItem(localStorageKey, JSON.stringify(data));
      }
    });
  });
});

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

How to get Dev Comments from an article Url

2020-05-20T10:00:00Z

I want to incorporate some of the wonderful comments, \U0001F495, \U0001F984, and \U0001F516’s that I have been getting on dev.to on my website. I have dabbled once or twice with no avail this time I am taking notes on my journey, so follow along and let’s get there together. By the end of this post, I will have a way to get comments from posts on the client-side thanks to the wonderfully open dev.to API.

I want to incorporate some of the wonderful comments, 💕, 🦄, and 🔖’s that I have been getting on dev.to on my website. I have dabbled once or twice with no avail this time I am taking notes on my journey, so follow along and let’s get there together. By the end of this post, I will have a way to get comments from posts on the client-side thanks to the wonderfully open dev.to API.

The API #

dev.to has an open API that allows us to easily get comments as HTML. They have their API hosted at https://docs.forem.com/api/#tag/comments, let’s take a look at it.

Here we can see that going to https://dev.to/api/comments?a_id=270180 returns us some json, that contains an array of comments.

[
  {body_html: '<the comment rendered as html>',
   user: {<an array with quite a bit of information about the commenting user>},
   children: [<an array of child comment objects>]
   <other stuff we don't care about>
  },
  <more comments>
  ]

What the heck is that a_id #

That is an article_id. Though a bit of searching I found that it occurs in at least four places on every page as a data attribute. Using chrome dev tools I found a good place to “query” it from.

With this knowledge, we can fetch the contents of an article and pull the articleId from it.

    async function getDevToAId(url) {
        // Gets the articleId of a dev.to article
        const root = 'https://dev.to/'
        if (!url.includes(root)) {
            url = root + url
        }
        let domparser = new DOMParser()
        const html = await fetch(url).then(r => r.text())
        const doc = domparser.parseFromString(html, 'text/html')
        const articleId = doc.querySelector('#article-body').dataset.articleId
        return articleId
    }

note I do check to see if a full URL or slug was given, if it was just the slug I tack on https://dev.to/ before fetching.

Now the comments #

The main event is here, what you all have waited for, and it’s by far the easiest part.

    async function getDevToComments(url) {
        const articleId = await getDevToAId(url)
        const response = await fetch(`https://dev.to/api/comments?a_id=${articleId}`)
        const comments = await response.json()
        return comments
    }

The hardest part of this was figuring out what the a_id was and how I was going to get it from some more commonly known information about my articles, the URL, or the slug

Try it out #

F12 pop open your console right in dev tools of this post and try it out.

Explicit vs Implicit Returns in Javascript

2020-05-03T11:55:00Z

Often when reading through javascript examples you will find some arrow functions use parentheses () while others use braces {}. This key difference is that parentheses will implicitly return the last statement while braces require an explicit return statement. It is important to understand the difference between them because it is likely that you will find code examples of both and trying to edit code written differently than you’re used to may have unintended consequences.

#

Arrow functions are one-liner functions in javascript that have two main syntactical ways to create the code block. with parentheses and braces. Let’s take a look at both ways of creating arrow functions so that when we come accross them in the wild it will all make sense.

#

Here is an example of an arrow function that will implicitly return the last statement without the return keyword. I believe that these are a bit more restricted in that you cannot set variables inside them. They are a little bit more concise and great for one-liners.

const implicit = thing => (thing)
undefined
implicit('hi')
"hi"

Note that the parentheses are not required for this example and not having parentheses or braces are implicitly returned as well.

// same as above
const implicit = thing => thing
undefined
implicit('hi')
"hi"

#

In the following example, the curly braces create an arrow function that must explicitly return anything that you want to return from the function. Since the return keyword is never used the function returns undefined by default.

// missing return statement
const explicit = thing => {thing}
undefined
explicit('hi')
undefined

In this example using the return keyword will cause the function to return thing and behave similarly to our implicit return.

// same as original
const explicit_return = thing => {return thing}
undefined
explicit_return('hi')
"hi"

#

Until writing this article I was unaware that you could not have a multiline arrow function with an implicit return statement. I tried myself and ran into some issues. I also tried to find examples online and could not find one. If it is possible to write something like below, let me know.

// more complex example
// only possible with an explicit return
const sayHello = who => {
    const greeting = 'Hello '
    const message = greeting + who
    return message
    }
undefined
sayHello('Waylon')
"Hello Waylon"