
Rather than relying on pre-built widgets or SDKs from platforms like [Twitter](https://publish.twitter.com/?buttonType=TweetButton&widget=Button), there is a simpler approach to adding "Share on &lt;site&gt;" links to your blog posts using URL redirection. 

Most sites have a dedicated "submit" link that allows for specific query parameters to be used in order to pre-populate the URL and title. The parameter names may differ for each site, for example, for Twitter it would be `https://twitter.com/intent/tweet?text=some text&url=https://example.org`.

You can store these values for different sites in an array of objects and map through it to display a link with the `target` attribute set to `_blank`. These links can then be styled with CSS without loading any external scripts.

```javascript
const shareSites = [
  {
    name: 'Hacker News',
    submitUrl: 'https://news.ycombinator.com/submitlink',
    titleParam: 't',
    urlParam: 'u',
  },
  {
    name: 'Lobsters',
    submitUrl: 'https://lobste.rs/stories/new',
    titleParam: 'title',
    urlParam: 'url',
  },
  {
    name: 'Reddit',
    submitUrl: 'https://reddit.com/submit',
    titleParam: 'title',
    urlParam: 'url',
  },
  {
    name: 'Twitter',
    submitUrl: 'https://twitter.com/intent/tweet',
    titleParam: 'text',
    urlParam: 'url',
  },
]

// Later in the post template component
const title = "How to ..."
const permalink = "https://example.com/..."
...
<div className="share-buttons">
  Share this post on:
  {shareSites.map((site) => (
    <span key={site.name}>
      <a
        href={`${site.submitUrl}
        ?${site.titleParam}=${encodeURIComponent(title)}
        &${site.urlParam}=${encodeURIComponent(permalink)}`}
        target="_blank"
        rel="noopener noreferrer"
      >
        {site.name}
      </a>{" "}
    </span>
  ))}
</div>
```



Adding share buttons on blog posts

[Top]


There are two primary ways to implement a "Scroll to top" button on webpages that I know of:

1. Using a link tag

Used by websites like Wikipedia and React docs, this solution is perhaps the simplest, as it doesn't require any JavaScript. Just link to "#" from a link tag in the HTML and all modern browsers will navigate the user to the top of the current page, much like what pressing `Home` does.

This solution does have a downside though. If you want to add smooth scrolling, you have to enable it in your global CSS which may not always be desirable.

```html
<a href="#">Back to top</a>
```

2. [`window.scrollTo`](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo)

This JavaScript method has more flexibility. You can add a click event listener on a button and call `window.scrollTo()` to navigate to the top. There are many options, including one for enabling smooth scrolling:

```javascript
const scrollTopBtn = document.querySelector('#scroll-to-top')

scrollTopBtn.addEventListener('click', () => {
  window.scrollTo(
    top: 0,
    behaviour: 'smooth'	,
  )
})
```


Multiple ways to implement "Scroll to top"


A while ago, I published [pl-sort](https://pl-sort.netlify.app), a web app that enables users to sort YouTube playlists based on various metrics such as views, likes/comments count, and more. Initially, creating this tool was not my goal. I simply wanted to sort a playlist. Here is the method I used, which involves a single bash oneliner using standard command line tools.

Suppose we want the videos in [this playlist](https://www.youtube.com/playlist?list=PLZHQObOWTQDMsr9K-rj53DwVRMYO3t5Yr 'The essence of calculus - 3Blue1Brown') sorted by their view counts in this format:

```json
[
  {
    "title": "The essence of calculus",
    "views": 7340027
  },
  {
    "title": "The other way to visualize derivatives | Chapter 12, Essence of calculus",
    "views": 3339209
  },
  ...
]
```

We can do this using tools that are readily available on most Unix-like systems:

- `curl`: A command line HTTP client used to send requests to endpoints.
- `jq`: A JSON processor that lets you transform JSON data into desired format with a powerful syntax. We will use jq to transform the response into the output format we want and sort the output by various keys. If your system doesn't have jq installed, see [jq's installation guide](https://stedolan.github.io/jq/download/).
- `xargs`: Commands like `grep` or `awk` can take input from command line arguments as well as `stdin` (output from one command can be piped into them as input) but `curl` can only take input as arguments. We will use xargs to take each video ID from the playlist, contruct an endpoint that we can send requests to, and pass it as an argument for curl.

Because of how YouTube's Data API v3 works, we cannot get all the information about every video in a playlist in a single request. First, we need to hit the [playlistItems](https://developers.google.com/youtube/v3/docs/playlistItems/list) endpoint to get the relevant video IDs, then call the [videos](https://developers.google.com/youtube/v3/docs/videos/list) endpoint for each ID for details.

Before you begin, obtain an API key from [Google Developer Console](https://console.cloud.google.com/) for YouTube Data API. Then set it as an environment variable by running the following command:

```bash
# Don't add any spaces around the = sign
$ export YT_KEY="your api key"

# Add these as well in order to shorten our command
$ export YT_API="https://www.googleapis.com/youtube/v3"
$ export YT_LISTID="PLZHQObOWTQDMsr9K-rj53DwVRMYO3t5Yr" # Playlist ID
```

By doing this, we don't have to type in these frequently needed values in our command every time we run it. We can refer to them with their keys when we need to, like this:

```bash
# -s flag makes curl silent
$ curl -s "$YT_API/playlistItems?part=contentDetails&playlistId=$YT_LISTID&maxResults=50&key=$YT_KEY"
{
  "kind": "youtube#playlistItemListResponse",
  "etag": "jhS4gzCu5OcX8oftAWInXrLHoZs",
  "items": [
    {
      "kind": "youtube#playlistItem",
      "etag": "ppImKV3lyokspBcbXkImZ7cmdEk",
      "id": "UExaSFFPYk9XVFFETXNyOUstcmo1M0R3VlJNWU8zdDVZci41NkI0NEY2RDEwNTU3Q0M2",
      "contentDetails": {
        "videoId": "WUvTyaaNkzM",
        "videoPublishedAt": "2017-04-28T15:58:48Z"
      }
    },
    {
      "kind": "youtube#playlistItem",
      "etag": "a29dMgyS-DwQYMokKGzUXy4H26U",
      "id": "UExaSFFPYk9XVFFETXNyOUstcmo1M0R3VlJNWU8zdDVZci4yODlGNEE0NkRGMEEzMEQy",
      "contentDetails": {
        "videoId": "9vKqVkMQHKk",
        "videoPublishedAt": "2017-04-29T16:24:03Z"
      }
    },
    ...
  "pageInfo": {
    "totalResults": 12,
    "resultsPerPage": 50
  }
}
```

This gets us a response with all the video IDs of interest, along with a bunch of information that we don't need. To strip this out and get just the information that we care about, we can pipe this response and use jq's filter syntax:

```bash
# Hit up arrow to replace ... with previous command
$ ... | jq '.items[].contentDetails.videoId'
"WUvTyaaNkzM"
"9vKqVkMQHKk"
"S0_qX4VJhMQ"
...
```

Now we need to loop through each line in this output and call curl requesting the /videos endpoint on each record:

```bash
# `-I {}` means replace the string `{}` in the URL with the current record (video id)
$ ... | xargs -I {} curl -s "$YT_API/videos?part=snippet,statistics&id={}&key=$YT_KEY"
{
  "kind": "youtube#videoListResponse",
  "etag": "LWiYRbWgpdH_mL3I4BdCu-yKxio",
  "items": [
    {
      ...
      "snippet": {
        "publishedAt": "2017-04-28T15:58:48Z",
        "channelId": "UCYO_jab_esuFRV4b17AJtAw",
        "title": "The essence of calculus",
        ...
       }
      "statistics": {
        "viewCount": "7363949",
        "likeCount": "207221",
        "favoriteCount": "0",
        "commentCount": "6365"
      }
      ...
    }
  ],
  ...
}
{
  "kind": "youtube#videoListResponse",
  "etag": "tY3Oi8Po8BhCGIRaZNJR5NfkVWA",
  "items": [
    {
      ...
      "statistics": {
        "viewCount": "2986293",
        "likeCount": "76291",
      }
      ...
    }
  ],
  ...
}
...
```

To strip the output of unnecessary info, we can use jq's [object construction syntax](https://stedolan.github.io/jq/manual/#TypesandValues):

Notice the `|tonumber` after viewCount. This will cast the string value into a number.

```bash
$ ... | jq '{title: .items[0].snippet.title, views: .items[0].statistics.viewCount|tonumber}'
{
  "title": "The essence of calculus",
  "views": 7363968
}
{
  "title": "The paradox of the derivative | Chapter 2, Essence of calculus",
  "views": 2986300
}
...
```

Finally, we can sort this output using the `views` key and reverse it to get the results in descending order:

```bash
# With --slurp/-s, we read the entire stream of JSON objects above into a large array
# and then run the filter on the array instead of running it on each object
$ ... | jq --slurp '.|=sort_by(.views)|reverse'
[
  {
    "title": "The essence of calculus",
    "views": 7364088
  },
  {
    "title": "The other way to visualize derivatives | Chapter 12, Essence of calculus",
    "views": 3344817
  },
  ...
]
```

## tl;dr

The final command comes out to this:

```bash
$ export YT_KEY="your api key"
$ export YT_API="https://www.googleapis.com/youtube/v3"
$ export YT_LISTID="PLZHQObOWTQDMsr9K-rj53DwVRMYO3t5Yr" # Playlist id

$ curl -s "$YT_API/playlistItems?part=contentDetails&playlistId=$YT_LISTID&maxResults=50&key=$YT_KEY" | jq '.items[].contentDetails.videoId' | xargs -I {} curl -s "$YT_API/videos?part=snippet,statistics&id={}&key=$YT_KEY" | jq '{title: .items[0].snippet.title, views: .items[0].statistics.viewCount|tonumber}' | jq --slurp '.|=sort_by(.views)|reverse'
```
