how to fix the cookie is not saving in the browser storage when login mutation is called in GraphQL playground?

 when I implemented the login function, I use the express-session to handle the refresh token. one copy will be save to MongoDB, another one will be save to the cookie. However, I tested the login mutation in the Apollo GraphQL playground. the cookie had been sent in the response header, but it never save in the browser.

the root cause of this issue is sterm from the playground setting.

by default "request.credentials": "omit",  it should be "request.credentials": "include", to force the playground to save the cookie

here is the original setting of playground

{

  "editor.cursorShape": "line",

  "editor.fontFamily": "'Source Code Pro', 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace",

  "editor.fontSize": 14,

  "editor.reuseHeaders": true,

  "editor.theme": "dark",

  "general.betaUpdates": false,

  "prettier.printWidth": 80,

  "prettier.tabWidth": 2,

  "prettier.useTabs": false,

  "request.credentials": "omit",

  "schema.disableComments": true,

  "schema.polling.enable": true,

  "schema.polling.endpointFilter": "*localhost*",

  "schema.polling.interval": 2000,

  "tracing.hideTracingResponse": true,

  "queryPlan.hideQueryPlanResponse": true

}

the following is the updated configuration

{

  "editor.cursorShape": "line",

  "editor.fontFamily": "'Source Code Pro', 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace",

  "editor.fontSize": 14,

  "editor.reuseHeaders": true,

  "editor.theme": "dark",

  "general.betaUpdates": false,

  "prettier.printWidth": 80,

  "prettier.tabWidth": 2,

  "prettier.useTabs": false,

  "request.credentials": "include",

  "schema.disableComments": true,

  "schema.polling.enable": true,

  "schema.polling.endpointFilter": "*localhost*",

  "schema.polling.interval": 2000,

  "tracing.hideTracingResponse": true,

  "queryPlan.hideQueryPlanResponse": true

}

how to use Powershell to convert CSV file into Json format data?

 there is a built-in function in powershell cmdlet, which will allow us to convert the csv data into json format data.

first we should go to the folder where is the csv file stored. my csv file is found in this folder

C:\code\django\django-search-app\fixtures

PS C:\code\django\django-search-app\fixtures> ls

    Directory: C:\code\django\django-search-app\fixtures

Mode                 LastWriteTime         Length Name

----                 -------------         ------ ----

-a----         8/24/2021   1:26 PM         872488 books.csv

-a----         8/24/2021   1:35 PM         883612 books_title_author.csv

here is script to be run the in windows powershell and it should be executed inside the  folder

PS C:\code\django\django-search-app\fixtures> $topicsjson = import-csv .\books_title_author.csv | ConvertTo-Json

PS C:\code\django\django-search-app\fixtures> $topicsjson | Add-Content -Path "myData.json"

 $topicsjson = import-csv .\books_title_author.csv | ConvertTo-Json

 $topicsjson | Add-Content -Path "myData.json"

after the scripts is executed.

there should be a json file name myData.json within the file.

PS C:\code\django\django-search-app\fixtures> ls

    Directory: C:\code\django\django-search-app\fixtures

Mode                 LastWriteTime         Length Name

----                 -------------         ------ ----

-a----         8/24/2021   1:26 PM         872488 books.csv

-a----         8/24/2021   1:35 PM         883612 books_title_author.csv

-a----         8/24/2021   1:40 PM        2047343 myData.json

how to use timer to debug the performance issue in python?

 it is very common to encounter the performance issue. it is very easy to identfiy the function with such issue by adding the timer inside the function or put the timer before and after the function call.

here is a sample snippet to show how to use the time to track the function execution

import time

# @cache

def fib(n):

    if n<=1:

        return n

    else:

        return fib(n-1) +fib(n-2)

def main():

    start=time.perf_counter()

    for i in range(40):

        print(i, fib(i))

    print("done")

    elapsed= time.perf_counter() -start

    print(f"completed in {elapsed} seconds")

        

if __name__ == '__main__':

    main()

the output is showing that the function was completed in 69.8057579 seconds.  it indicated that we should opitmize this function for better performance.

PS C:\code\python\python> & C:/Python39/python.exe c:/code/python/python/tutorial/cache/fibonacci_sequnce.py

0 0

1 1

2 1

3 2

4 3

5 5

6 8

7 13

8 21

9 34

10 55

11 89

12 144

13 233

14 377

15 610

16 987

17 1597

18 2584

19 4181

20 6765

21 10946

22 17711

23 28657

24 46368

25 75025

26 121393

27 196418

28 317811

29 514229

30 832040

31 1346269

32 2178309

33 3524578

34 5702887

35 9227465

36 14930352

37 24157817

38 39088169

39 63245986

done

completed in 69.8057579 seconds

PS C:\code\python\python>

how can we improve the performance of this function? Cache will dramatically improve the execution time.

here is the improved version 

from functools import cache

import time

@cache

def fib(n):

    if n<=1:

        return n

    else:

        return fib(n-1) +fib(n-2)

def main():

    start=time.perf_counter()

    for i in range(40):

        print(i, fib(i))

    print("done")

    elapsed= time.perf_counter() -start

    print(f"completed in {elapsed} seconds")

        

if __name__ == '__main__':

    main()

done

completed in 0.0112849 seconds

the execution time is less than 1 seocond which is huge change comparing to the previous function will cost 89 second to complete.

MVC(Model View Controller) Design Pattern in few words

we can use one sentence to describe each component in MVC model. 

M: Model manage business logic and data

V: View manage the display of data

C: Controller handle page event and navigation between pages

how to open a pdf file in chrome instead of download it?

 It is pretty straightforward to set the chrome to open the file instead of download it within the chrome setting.

here is the path the setting

chrome://settings/content/pdfDocuments

open the chrome and paste the above in the address bar. then select Open PDFs in Chrome

Visual Studio Code Settings for fullstack devleopment

 here are some of settings from my own personal favoriate

  //custom settings

    "editor.mouseWheelZoom": true,

    "workbench.activityBar.visible": true,

    "workbench.editor.showTabs": false,

    "workbench.sideBar.locataion": "right",

    "editor.minimap.enabled": false,

    "zenMode.centerLayout": true,

    "workbench.iconTheme": "vscode-great-icons",

    "workbench.sideBar.location": "right"