DEV Community: I.G

How to rename the base branch of your opened PR in GitHub

I.G — Fri, 17 Nov 2023 17:50:57 +0000

Conclusion

All you have to do is rename the branch in GitHub.

Open your repository's branches page (/{your_user_id}/{your_repository_name}/branches) and rename the branch.
Then, all PRs that had the branch as a base branch automatically are updated and the base branch is also changed to the renamed one.

※ But, the PR that had the branch as a head branch doesn't be updated automatically. So, you need to re-create a new pull request once more.

cf. https://docs.github.com/en/repositories/configuring-branches-and-merges-in-your-repository/managing-branches-in-your-repository/renaming-a-branch

How to update a value instantaneously instead of asynchronously in React

I.G — Wed, 15 Nov 2023 19:49:54 +0000

Overview

useState doesn't update a value instantaneously, so that value will be as it was even if it's accessed soon after useState like below.

cf. https://ja.react.dev/reference/react/useState#usage

React handles the accumulated queues and updates state in bulk after all events executing in parallel completed being done.
After that, components are re-rendered.

cf. https://ja.react.dev/learn/queueing-a-series-of-state-updates

function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
    console.log(count); // 0
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

useRef

Use useRef as "escape hatch" to get the latest updated state when setState is called in an asynchronous event(function).

Gist

setState is an asynchronous function.
The queue for updating the state is not captured by the lifecycle of the state in React when it is called in an asynchronous function. So the state is not updated then.

cf. https://crybabe.net/archives/12#toc1

cf. https://ja.react.dev/learn/referencing-values-with-refs#when-to-use-refs

function Example() {
  const [count, setCount] = useState(0);
  const [count2, setCount2] = useState(0);
  const countRef = useRef(0);

  const handleClick = () => {
    setTimeout(() => {
      setCount(count + 1);
      console.log(count); // 0
      setCount2(count => count + 1);
      console.log(count); // 1
      countRef.current += 1;
      console.log(countRef.current); // 1
    }, 1000);
  };

  const onSubmit = () => {
    console.log(count); // 0
    console.log(count2); // 0
    console.log(countRef.current); // 1
  };

  return (
    <div>
      <p>{countRef.current}</p>
      <button onClick={handleClick}>Click me</button>
      <button onClick={onSubmit}>Submit</button>
    </div>
  );
}

export default Example;

However, you need to be careful about the point useRef is independent of the React rendering cycle and so doesn't update DOM.

In principle, it's important to design the overall logic in the component so that they can work even if useState runs asynchronously.

Functional update

Use a functional update way instead of the one to do directly if you wanna access an updated value soon after it's updated by useState in the same event(function).

cf. Reference article(ja)

const increaseDouble = () => {
  setCount(count + 1); // not done
  setCount(count + 1); // done
  console.log(count) // 1
};

First setCount(count + 1) is called. But count is still 0 at this point due to the asynchronous update.
Instantaneously, second setCount(count + 1) is called. But count is still 0 at this point too because 1st setCount is not done yet.

So you can use a functional update to resolve that.

cf. https://ja.react.dev/reference/react/useState#updating-state-based-on-the-previous-state

const increaseDouble = () => {
  setCount(count => count + 1); // done
  setCount(count => count + 1); // done
  console.log(count) // 2
};

※ However seems there's no big difference between a functional update and a direct update for the most part except for the case like above.

How to exclude a file or folder when zipping a folder (on Mac)

I.G — Thu, 19 Oct 2023 07:49:57 +0000

# ex: zip -r app.zip ./app -x "*node_modules*"
# ex2: zip -r app.zip ./zpp -x "*.pyc*"

zip -r <ZIP_FILE_NAME> <TARGET_FOLDER_PATH> -x "*<FILE_OR_FOLDER_PATTERN>*"

Create a zip file excluding a specified file or folder(ja)

Safari automation test on your own iPhone with Selenium in 2023

I.G — Wed, 18 Oct 2023 17:40:30 +0000

Prerequisites

Settings > Safari > Details > Turn on "Remote automation" on your own iPhone.
Connect the iPhone with your Mac PC where Selenium codes run and then choose "Trust".

Running a website automation test on your own iPhone with Selenium

Source code

from time import sleep

from selenium import webdriver
from selenium.webdriver.safari.options import Options as SafariOptions

# Use Options to set capabilities instead of DesiredCapabilities after Selenium 4
safari_options = SafariOptions()
safari_options.set_capability("platformName", "ios")

driver = webdriver.Safari(options=safari_options)
driver.get("https://google.com")

sleep(10)

pyenv + pipenv (on Mac)

I.G — Wed, 18 Oct 2023 17:06:04 +0000

Overview

You can create a virtual environment of Python like nvm by installing pyenv and pipenv.

pyenv is the version manager of Python(≒ nvm).

pipenv is the library manager of Python.
This manages installed libraries for each directories(projects) because the libraries installed via pipenv are installed in ~/.virtualenvs/<YOUR_DIRECTORY_NAME>-<UUID>.
<YOUR_DIRECTORY_NAME>-<UUID> directory is automatically generated when pipenv installs a library in the directory.

Getting started

Steps (ja)

1. Install pyenv

brew install pyenv

pyenv | github.com

2. Add the paths to $PATH to be able to activate pyenv command and manage python versions with it

You need to add the following lines to .zprofile or .zshrc etc...

# Add .pyenv/bin to $PATH to be able to run pyenv command anywhere
export PATH="$HOME/.pyenv/bin:$PATH"

# Add .pyenv/shims to $PATH to switch python versions with pyenv command
eval "$(pyenv init -)"

How to manage your python virtualenvs with Pipenv
Pipenv Installation
Where does pipenv install a package (ja)

3. Install a python version

# Show the list of version available for installation
pyenv install -l

# Install the version
pyenv install <version> # ex: pyenv install 3.12.0

# Show the list of installed version
pyenv versions

4. Set the python version in the local directory

The python version is managed by .python-version file created after the command.

# Set the version in local
pyenv local <version>

# Show the current python version
pyenv version

# Check whether python command is activated
python -V

5. Install pipenv

Pipfile (≒ package.json) is created after the installation command.

brew install pipenv

# Set the same python version as pyenv
pipenv --python <version>

pipenv | github.com

6. Install a package and create a virtual environment

When a package is installed for the first time in your current directory, ~/.virtualenvs/<YOUR_DIRECTORY_NAME>-<UUID> directory is created and then the package is installed there.

# Add the package information to **Pipfile** and **Pipfile.lock** (be created if it doesn't exist)
pipenv install <PACKAGE_NAME>

# Uninstall
pipenv uninstall <PACKAGE_NAME>

7. Activate a virtual environment

You need to enter the virtual environment created above to use the installed packages.

# Activate the local directory's environment
# You can exit from it by entering `exit` if you want do
pipenv shell

# Activate the environment and run a command
pipenv run <COMMAND> # pipenv run python main.py

pipenv run <COMMAND> means to run pipenv shell and then run <COMMAND>.

pipenv run <command>

Other commands

# Show the path of the virtual environment (directory)
pipenv --venv

# Remove the local virtual environment with the whole installed packages
pipenv --rm

Command list (ja)

How can a client receive the cookie from a server-side?

I.G — Sun, 24 Sep 2023 16:37:54 +0000

Conclusion

A client-side can receive the cookie from a server-side configuring "SameSite=none" when performing set-cookie.
But you need to configure Secure attribute as well, otherwise the current modern browsers don't store the cookie for security.

Environment

Frontend: React
Serverside: API Gateway + Lambda + FastAPI(Python)

Server-side

# functions/hub.py
from fastapi import FastAPI
from mangum import Mangum

from .routers import authentication_router

app = FastAPI()

app.include_router(authentication_router, tags=["authentication"])

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# Mangum converts a request and response of FastAPI into event and context of AWS Lambda.
lambda_handler = Mangum(app)

FastAPI restricts OPTIONS requests (preflight requests) by default, so even if you allow them on the API Gateway side, if you do not allow them on the FastAPI side, a 405 error will be returned.

So, you need to explicitly include CORS headers in the response in FastAPI middleware so that the browser can make preflight requests.

# functions/routers/authentication.py
from fastapi import APIRouter, Request, Response

authentication_router = APIRouter()

class RequestBody(BaseModel):
    email: str
    password: str

@authentication_router.post("/signin")
def sign_in(requset_body: RequestBody, request: Request, respose: Response):
  # Get tokens from Cognito
  tokens = signin(requset_body.email, requset_body.password)
  response.set_cookie(
    key="access_token",
    value=tokens.access_token,
    httponly=True,
    secure=True,
    samesite="none"
  )

Enabling HttpOnly, prevent the cookie from being accessed by JavaScript like document.cookie.
Enabling Secure, the cookie is send only via HTTPS. HTTP is prohibited to send it.
"Samesite=none" is to allow the cookie to be sent over a cross-site request. (e.g. from example.apigateway.com to example.vercel.app as below)

API Gateway	Vercel
example.apigateway.com	example.vercel.app

Remarks

If configuring "SameSite=Lax" or "SameSite=Strict", client-side can't receive the cookie from the server-side.

※Exclaimation mark is displayed at the header of set-cookie in the Network tab of the dev tool of your browser with the mesasge (e.g. "This attempt to set a cookie via a Set-Cookie header was blocked because it had the "SameSite=Lax" attribute but came from a cross-site response which was not the response to a top-level navigation.")

Configuration for Serverless Framework

# serverless.yml
provider:
  httpApi:
    cors:
      allowedOrigins:
        - https://example.vercel.app
        - http://localhost:3000
      allowedHeaders:
        - Content-Type
        - Set-Cookie
      allowedMethods:
        - OPTIONS
        - GET
        - POST
        - PUT
        - DELETE
      allowCredentials: true

functions:
  hub:
    name: hub
    handler: hub.lambda_handler
    events:
     - httpApi:
       # ANY method is used to catch all HTTP methods
       method: any
       # /{proxy+} route works as a catch-all route
       path: /{proxy+}

Only the origins in allowedOrigins can access API Gateway.
Setting allowCredentials to true, enables cookies to be sent across domains.
/{proxy+} catches all requests that don't match other routes already configured in API Gateway.