DEV Community: Takumi Akimoto

Create a header that appears and disappears by scrolling

Takumi Akimoto — Tue, 26 Apr 2022 05:00:00 +0000

Headers can be animated easily by CSS and a few JavaScript, but the speed will be constant. I hate that, so I’ll create a header that works naturally like this.

Sample code & Demo

This script changes the value of top by scrolling.

const header = document.querySelector("header"),
  headerStyle = window.getComputedStyle(header),
  headerHeight = parseFloat(headerStyle.height);

let lastPosition = 0;

document.addEventListener("scroll", () => {
  const currentPosition = window.scrollY,
    diff = currentPosition - lastPosition;

  let newTop = parseFloat(headerStyle.top) - diff;
  if (diff < 0) {
    newTop = Math.min(newTop, 0);
  } else {
    newTop = Math.max(newTop, 0 - headerHeight);
  }

  header.style.top = `${newTop}px`;
  lastPosition = currentPosition;
});

If your header has a shadow, you also need to calculate that.

newTop = Math.max(newTop, 0 - headerHeight - shadowHeight)

How to save cookies as a file in Golang

Takumi Akimoto — Sat, 19 Mar 2022 00:00:00 +0000

Go’s cookiejar doesn’t have any function to persistence cookies, so you need to do something to save cookies to a local file. To make it easy, you can use juju/persistent-cookiejar instead.

juju / persistent-cookiejar

cookiejar is a fork of net/http/cookiejar that allows serialisation of the stored cookies

cookiejar

-- import "github.com/juju/persistent-cookiejar"

Package cookiejar implements an in-memory RFC 6265-compliant http.CookieJar.

This implementation is a fork of net/http/cookiejar which also implements methods for dumping the cookies to persistent storage and retrieving them.

Usage

func DefaultCookieFile

func DefaultCookieFile() string

DefaultCookieFile returns the default cookie file to use for persisting cookie data. The following names will be used in decending order of preference:

- the value of the $GOCOOKIES environment variable.
- $HOME/.go-cookies

type Jar

type Jar struct {
}

Jar implements the http.CookieJar interface from the net/http package.

func New

func New(o *Options) (*Jar, error)

New returns a new cookie jar. A nil *Options is equivalent to a zero Options.

New will return an error if the cookies could not be loaded from the file for any reason than if the file does not exist.

func (*Jar) Cookies

func (j

…

View on GitHub

Usage

You can use it as same as net/http/cookiejar, and can save cookies by Save.

jar, _ := cookiejar.New(nil)
http.DefaultClient.Jar = jar

// Some tasks

jar.Save()

Where to save is decided by an option you put into New; it is set to $GOCOOKIES or $HOME/.go-cookies by default. If the file doesn't exist, it returns no errors and creates it when saving.

jar, _ := cookiejar.New(&cookiejar.Options{Filename: "path/to/cookie"})

Try to use

This is a sample program to log in to AtCoder. It outputs Already logged in! if you've already logged in, or asks your username and password if not yet.

code
Some error handlings were omitted.

package main

import (
    "fmt"
    "log"
    "net/http"
    "net/url"
    "os"
    "strings"

    "github.com/PuerkitoBio/goquery"
    "github.com/juju/persistent-cookiejar"
    "golang.org/x/term"
)

func main() {
    jar, _ := cookiejar.New(nil)
    http.DefaultClient.Jar = jar
    defer jar.Save()

    // If the file exists, check whether logged in
    _, err := os.Stat(cookiejar.DefaultCookieFile())
    if err == nil {
        doc, _ := getDocument("https://atcoder.jp/home")
        navbarRight := doc.Find("div#navbar-collapse > ul.navbar-right")
        if navbarRight.Children().Length() == 2 {
            fmt.Println("Already logged in!")
            return
        }
    }

    var username string
    fmt.Print("Username: ")
    fmt.Scan(&username)

    fmt.Print("Password: ")
    // Don't press ctrl+c while Go reads password because your terminal won't display any inputs after that.
    // To resolve it, see gist.github.com/montanaflynn/5ae3eeae7212b0ba232f46e88f1ab67f
    bypePassword, _ := term.ReadPassword(int(os.Stdin.Fd()))

    loginUrl := "https://atcoder.jp/login"
    doc, _ := getDocument(loginUrl)
    token, found := doc.Find(`form input[type="hidden"]`).Attr("value")
    if !found {
        log.Fatal("error: cannot find CSRF token")
    }

    values := url.Values{
        "username":   {username},
        "password":   {string(bypePassword)},
        "csrf_token": {token},
    }
    req, _ := http.NewRequest("POST", loginUrl, strings.NewReader(values.Encode()))
    req.Header.Set("Content-Type", "application/x-www-form-urlencoded")

    resp, err := http.DefaultClient.Do(req)
    if err != nil {
        log.Fatal(err)
    }
    defer resp.Body.Close()

    if resp.Request.URL.String() == loginUrl {
        log.Fatal("Failed to login. Check your username/password")
    }

    fmt.Println("Successfully logged in!")
}

func getDocument(url string) (*goquery.Document, error) {
    resp, err := http.Get(url)
    if err != nil {
        log.Fatal(err)
    }
    defer resp.Body.Close()

    return goquery.NewDocumentFromReader(resp.Body)
}

Now you can find the cookie as a file.

$ cat ~/.go-cookies
[{"Name":"REVEL_SESSION","Value":"xxxxx...","Domain":"atcoder.jp","Path":"/","Secure":true,"HttpOnly":true,"Persistent":true,"HostOnly":true,"Expires":"2022-09-13T18:19:25.9840269+09:00","Creation":"2022-03-17T18:19:15.4703732+09:00","LastAccess":"2022-03-17T18:19:25.9840269+09:00","Updated":"2022-03-17T18:19:25.9840269+09:00","CanonicalHost":"atcoder.jp"}]

If you execute it again when the file exists,

$ go run main.go
Already logged in!

it won't ask you username/password.

Generate URL cards when building your Hugo site on GitHub Actions

Takumi Akimoto — Tue, 01 Mar 2022 10:36:15 +0000

Hugo is known as a super-fast static site generator. It also has many functionaries such as shortcodes. However, it's not good at dynamic processing because it can't use remote files other than JSON or CSV. So we need an API server to generate link cards from URLs.

Although, it's wasteful to use a rental server and I also want to run it locally. Therefore, I decided to create a simple Docker image and use it on GitHub Actions.

Here is the repo of the container: akimon658/ogjson

Generate JSON from Open Graph

Just using otiai10/opengraph.

package main

import (
    "encoding/json"
    "log"
    "net/http"
    "github.com/otiai10/opengraph"
)

func main() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        ogp, err := opengraph.Fetch(r.FormValue("url"))
        if err != nil {
            http.Error(w, err.Error(), http.StatusInternalServerError)
        }

        w.Header().Set("Content-Type", "application/json")
        err = json.NewEncoder(w).Encode(ogp)
        if err != nil {
            http.Error(w, err.Error(), http.StatusInternalServerError)
        }
    })

    // Using 0.0.0.0 because cannot access from outside of the container via localhost or 127.0.0.1. Please tell me better solution if you know
    log.Fatal(http.ListenAndServe("0.0.0.0:8080", nil))
}

And build it.

FROM golang:1.17.7-bullseye AS builder

WORKDIR /go/src/ogjson
COPY . .
RUN go install

FROM gcr.io/distroless/base-debian11

COPY --from=builder /go/bin/ogjson /ogjson
CMD ["/ogjson"]

Execute docker run --rm -p 8080:8080 <image>, then you'll be able to get JSON from http://localhost:8080/?url=https://example.com

Use service containers

Service containers are Docker containers that provide a simple and portable way for you to host services that you might need to test or operate your application in a workflow. For example, your workflow might need to run integration tests that require access to a database and memory cache.

About service containers - GitHub Docs

We can use containers by just adding the following settings to the manifest file.

jobs:
  # Name of the job
  build:
    runs-on: ubuntu-latest

    services:
      # Name of the service
      ogjson:
        # Name of the image on Docker Hub
        image: akimon658/ogjson:1.0.0
        ports:
          - 8080:8080

Create the shortcode

You must create shortcodes under layouts/shortcodes/. The file name will be the shortcode name.

Here is the shortcode I'm using within this blog.

<!-- Get argument and JSON -->
{{ $url := .Get 0 }}
{{ $json := getJSON "http://localhost:8080/?url=" $url }}

<!-- Add target="_blank" when opening external links -->
<a href="{{ $url | safeURL }}"{{ if strings.HasPrefix $url "http" }} target="_blank" rel="noopener noreferrer"{{ end }}>
  <div class="card">
    <div class="card-meta">
      <div class="card-title" title="{{ $json.Title }}">{{ $json.Title }}</div>
      <div class="card-host">{{ $json.URL.Host }}</div>
      <div class="card-description" title="{{ $json.Description }}">{{ $json.Description }}</div>
    </div>
    <!-- Image is an array so use the first one -->
    {{ range first 1 $json.Image }}
      <img src="{{ .URL }}" alt="{{ .Alt }}">
    {{ end }}
  </div>
</a>

I'm using Title, URL.Host, Description, and Image, but the JSON gives you more information.

Call the shortcode

{{< card "https://dev.to" >}}

Here you can see, Hugo successfully generated a URL card!

I think it is also useful to run on dev containers.

How to replace home directory with "~" on PowerShell

Takumi Akimoto — Mon, 13 Dec 2021 08:12:50 +0000

PowerShell displays the current full path by default. It's long, so I'd like to replace it with ~ like Bash.

Prepare a profile

You can customize your PowerShell with $profile. It doesn't exist by default, so you need to run touch $profile.

Customize

To customize the prompt, use function prompt. Here is a built-in one.

function prompt {
    $(if (Test-Path variable:/PSDebugContext) { '[DBG]: ' }
      else { '' }) + 'PS ' + $(Get-Location) +
        $(if ($NestedPromptLevel -ge 1) { '>>' }) + '> '
}

Source: about Prompts - PowerShell | Microsoft Docs

It seems using $(Get-Location) to get the current path, but we can't use it as a string (even if we use $pwd). So let's use Convert-Path instead.

function prompt {
    $currentDir = (Convert-Path .)
    $(if (Test-Path variable:/PSDebugContext) { '[DBG]: ' }
      else { '' }) + 'PS ' + $currentDir +
        $(if ($NestedPromptLevel -ge 1) { '>>' }) + '> '
}

Now we can use $currentDir as a string. All that is left is checking if it includes $home and replacing it.

function prompt {
    $currentDir = (Convert-Path .)
    if ($currentDir.Contains($HOME)) {
        $currentDir = $currentDir.Replace($HOME, "~")
    }
    $(if (Test-Path variable:/PSDebugContext) { '[DBG]: ' }
      else { '' }) + 'PS ' + $currentDir +
        $(if ($NestedPromptLevel -ge 1) { '>>' }) + '> '
}

Afterword

This time we made just a little customize for PowerShell, but we can do more things with a profile. I'm happy if this article will be helpful for you.

Here is my profile for your reference.

github.com/akimon658/pwsh-profile