DEV Community: Agik Setiawan

Golang: get package from own gitlab private repository with SSH

Agik Setiawan — Tue, 16 Jul 2024 07:19:48 +0000

Step 1 : Generate SSH token RSA in local computer with ssh-keygen
Step 2 : Add ssh token to gitlab
step 3 : Run shell

RUN ssh-keyscan -t rsa gitlab.kplabs.id >> ~/.ssh/known_hosts

step 4 : Run shell
Git configuration

git config --global url."YOUR_OWN_GITLAB_SITE:".insteadOf "https://YOUR_OWN_GITLAB_SITE/"

step 5 : Run shell

export GOPRIVATE=YOUR_OWN_GITLAB_SITE/YOUR_PACKAGE

step 6 : Run shell

go get YOUR_OWN_GITLAB_SITE/YOUR_PACKAGE

TinyMCE can't insert Code and dropdown with Chakra UI Modal

Agik Setiawan — Sat, 03 Jun 2023 01:36:36 +0000

Hi, I have problem when work with TinyMCE and Chakra UI modal. I can't insert code plugin and dropdown.

Solution:

add "trapFocus={false}" in modal.

<Modal isCentered isOpen={isOpen} onClose={onClose} size={"6xl"} trapFocus={false}>

Dump and Restore Postgesql

Agik Setiawan — Wed, 29 Mar 2023 17:11:03 +0000

Dump

pg_dump POSTGRESQL_URL > my_db.sql

Restore

psql -h HOST_DB -U USERNAME existing_db < my_db.sql

Angular Material slowly when use large Content Accordion

Agik Setiawan — Sat, 18 Feb 2023 16:42:34 +0000

I have problem when using accordion with large content inside. My case are using nested accordion.

My Solution are using Lazy Rendering with template like below

<mat-expansion-panel>
  <mat-expansion-panel-header>
    This is the expansion title
  </mat-expansion-panel-header>

  <ng-template matExpansionPanelContent>
    Some deferred content
  </ng-template>
</mat-expansion-panel>

https://material.angular.io/components/expansion/overview#lazy-rendering

Add Virtual Background List ini Zoom SDK

Agik Setiawan — Sun, 25 Dec 2022 14:25:20 +0000

Open
https://developer.chrome.com/origintrials/#/trials/active

Generate token from "SharedArrayBuffers in non-isolated pages on Desktop platforms" list menu.

Add Meta tag in HTML

<meta
      http-equiv="origin-trial"
      content="YOUR_TOKEN_HERE"
    />

First code we must have DOM with ID

let meetingSDKElement: any = document.getElementById('meetingSDKElement');
client.join({
        sdkKey: zoom.sdkKey,
        signature: signature,
        meetingNumber: 1234,
        password: encrypted_password,
        userName: "test",
        userEmail: "test@gmail.com",
    });

After init and join, add code below for register list of virtual background image

client.updateVirtualBackgroundList([
            {
                id: 'abc',
                url: '/images/abc.jpg',
                fileName: 'John Doe',
                displayName: 'John Doe',
            },
            {
                id: 'kp',
                url: '/images/vb/test.jpg',
                fileName: 'test.jpg',
                displayName: 'Test image',
            }
        ])

Next, Inside setting menu in host screen, find the virtual background menu and then change virtual background with image that registered before.

Fixing Eslint in Vue 3 with Typescript Visual Studio Code

Agik Setiawan — Wed, 21 Dec 2022 00:24:53 +0000

I have problem Eslint Error when working with Vue 3 and Typescript template. Errors are shown because Vetur is not compatible with Typescript.

Solutions:
Uninstall Vetur from Visual Studio Code extension

Install extension called "volar"

Volar is official extension from Vue creator

Fixed Yarn error insufficient permissions

Agik Setiawan — Sat, 17 Sep 2022 06:11:08 +0000

I got error permission when using yarn create

Solusions:

run command in terminal

yarn config set prefix ~/.local

NextSeo not updated when inspect source code using dynamic Meta data and using external API

Agik Setiawan — Thu, 21 Jul 2022 05:30:26 +0000

Hello, I will share my problem and how I found solution with my Next JS project when i using dynamic Meta Data from external API using GraphQL(Apollo Client).

When i use "useQuery" from apollo client it does not working when using SEO or when i share URL in to Social media like Facebook, Linkedin.

Solution is using "getInitialProps" with async method and Hit API from getInitialProps.

const DetailBlogPage: NextPage = ({ data }: any) => {

    return (
        <SiteLayout>
            <NextSeo
                title={data.articles.title}
                description={data.article..summary}
                canonical={`https://www.nuliscv.com/blog/${data.article.slug}`}
                openGraph={{
                    type: 'website',
                    locale: 'id_ID',
                    url: `https://www.example.com/blog/${data.articles[0].slug}`,
                    site_name: 'Example.com',
                    images: [
                        { url: `https://abcdefg.directus.app/assets/${data.articles[0].image.id}` },
                    ]
                }}
            />
            <div>
                <DetailBlog data={data} />
            </div>
        </SiteLayout>
    )
}

DetailBlogPage.getInitialProps = async ({ query }) => {
    // do the data fetching here
    const { slug } = query;

    const errorLink = onError(({ graphqlErrors, networkError }: any) => {
        if (graphqlErrors) {
            graphqlErrors.map(({ message, location, path }: any) => {

            });
        }
    });

    const portfolioLink = from([
        errorLink,
        new HttpLink({ uri: "https://abcdefg.directus.app"}),
    ]);

    const client = new ApolloClient({
        cache: new InMemoryCache({
            addTypename: false
        }),
        link: portfolioLink,
    });


    const { data } = await client.query({
        query: GET_DETAIL_BLOG,
        variables: {
            slug
        }
    })

    return { data: data };
}

Fix Netlify cms failed to load entry api_error object object in with Gitlab

Agik Setiawan — Fri, 17 Jun 2022 09:09:16 +0000

Hello all, I will share fixing error Netlify CMS with message "failed to load entry api_error object object". in my case is because netlify CMS don't have access permission to access gitlab repository. Gitlab repository required Access Token for request from Netlify CMS.

Solution:

Login in Netlify account
Open Site menu
Click your site
Entry to Identity
Scroll to bottom and and get menu Git Gateway
Edit Setting
Click Generate token and it will be redirect to Gitlab account and token will autofill when you have done in Gitlab

AppImage crash The display compositor is frequently crashing. Goodbye.

Agik Setiawan — Wed, 15 Jun 2022 01:18:26 +0000

Just add

--no-sandbox

in terminal.

Example:

./MyApp.AppImage --no-sandbox

Install openvpn3 in Fedora 36

Agik Setiawan — Tue, 14 Jun 2022 04:11:41 +0000

sudo dnf copr enable dsommers/openvpn3

sudo dnf install openvpn3-client

for test connection with openvpn you must have client ovpn file

Example for connect to openvpn server:

openvpn3 session-start --config ~/client.ovpn

Access container in Kubernetes with CLI

Agik Setiawan — Mon, 13 Jun 2022 15:48:19 +0000

First we must get list of pod with command

kubectl get pod

for access container we use pod name like bellow

kubectl exec --stdin --tty POD_NAME -- /bin/bash