DEV Community: Sony AK

How to use Playwright with external/existing Chrome

Sony AK — Sat, 22 Jul 2023 19:50:51 +0000

Mostly example using Playwright in JavaScript is using Chromium that bundled with Playwright. How about if we want to use existing or external Chrome?

No worries, it means you have to set the Playwright to connect to a Chromium instance manually using Chrome DevTools Protocol (CDP) and that means you should run the Chrome with --remote-debugging-port=9222.

For the external Chrome I recommend using Chrome for Testing that is good for this situation. Just to to https://developer.chrome.com/blog/chrome-for-testing to read more.

I have created the repository and quick script sample about this. Just go to https://github.com/sonyarianto/playwright-using-external-chrome

Wanna quick try? Here is the script index.js.

import { chromium } from 'playwright';

(async () => {
    try {
        const browser = await chromium.connectOverCDP('http://localhost:9222');

        console.log(browser.isConnected() && 'Connected to Chrome.');
        console.log(`Contexts in CDP session: ${browser.contexts().length}.`);

        const context = browser.contexts()[0];

        const page = await context.newPage();
        await page.goto('https://example.com');
        await page.screenshot({ path: 'example.png' });

        await page.close();
        await context.close();
        await browser.close();
    } catch (error) {
        console.log('Cannot connect to Chrome.');
    }
})();

Then run it like this. Make sure you already run the Chrome first (with argument --remote-debugging-port=9222).

node ./index.js

Happy using Playwright.

Simple Demo Fluent UI 2 TreeView Web Components with Dynamic Data in Svelte

Sony AK — Mon, 26 Jun 2023 04:47:51 +0000

In this simple demo we will show you how to integrate the object tree structure into Microsoft Fluent UI 2 TreeView Web Components in Svelte. The tree structure only has single root.

Check this out on this Svelte REPL link https://svelte.dev/repl/317e16c270b84d2dba580f8a19445c92

Good for:

Anyone that confuse about integrating the data into the TreeView.
Anyone that want to create a UI that has TreeView display.

Enjoy the hacking.

Demo of Mini PHP Framework (using Symfony routing and Blade template)

Sony AK — Sat, 24 Jun 2023 10:59:36 +0000

In this quick demo we will create mini PHP framework by using vanilla PHP plus Symfony routing component (to handle routing) and Blade template engine (to handle templating). Why? Why not. I just want to mix and match.

See the skeleton demo here https://github.com/sonyarianto/mini-php-framework

Enjoy the PHP coding.

Simple GitHub Actions Demo (update README.md content if a file updated)

Sony AK — Sat, 24 Jun 2023 10:51:23 +0000

I just want to share quick demo about how to use GitHub Actions for fun.

The scenario is simple, I have a repo that contains test.php and README.md files. When I update the test.php (means git push happen) it will update part of content in README.md file with the content of test.php.

See the demo at https://github.com/sonyarianto/github-actions-push-and-display-it-on-readme

The workflow is on .github/workflows/update-readme.yml.

Enjoy the GitHub Actions.

Using Redux with Svelte and SvelteKit

Sony AK — Sun, 18 Jun 2023 09:50:46 +0000

Redux with Svelte is fun to use. We will play with Redux (Redux Toolkit) and Svelte this time. Why Redux Toolkit? Relax bro, Redux Toolkit is modern recommended way to use Redux. It's official from Redux team and it's already included with Redux package.

I will give you 2 (two) repositories to play with. Both very simple to understand how Redux works using Svelte or SvelteKit.

Just check it out at these.

https://github.com/sonyarianto/redux-with-svelte
https://github.com/sonyarianto/redux-with-sveltekit
https://svelte.dev/repl/778d2aab2e1e462d9da6f7cc3c7b62bb

Basically both project is a simple counter application (increment and decrement) but this is essential to learn state management with Redux.

No distraction guaranteed, no split files, all code in single file src/App.svelte or src/routes/+page.svelte. No CSS. Just focus on the code.

Enjoy and I hope you like it.

Using Redux without Build Steps (a.k.a via CDN)

Sony AK — Fri, 16 Jun 2023 06:56:08 +0000

Learning Redux sometimes hard, even still hard for me, even harder if we just learn and never use it.

Buy hey I just created a GitHub repository that contains educational material (a.k.a simple sample) about how to use Redux without any complexity.

Check it out at https://github.com/sonyarianto/redux-without-buildsteps

It's called "Redux without Build Steps", it will show you about how to use the famous Redux just by using their CDN script. No installation, no npm install things and all code is in a single HTML file, even we do not need a web server to run it.

Hope you enjoy it learning Redux.

How to use React without build steps or framework

Sony AK — Wed, 31 May 2023 19:44:19 +0000

Why React without build steps? Why not. Sometimes we are boring with doing npm install bla bla bla. Let's doing React like jQuery things, just use CDN and run hahaha.

Let's start.

Just go to https://github.com/sonyarianto/react-without-buildsteps

There is single index.html file there and without build steps means we just use CDN version for all of our React operation. That's includes the router and the Babel to handle the JSX code.

Here is the CDN URLs that used on that projects.

<script src="https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@remix-run/router@1.6.2/dist/router.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-router@6.11.2/dist/umd/react-router.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-router-dom@6.11.2/dist/umd/react-router-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.22.4/babel.min.js"></script>

and then finally the demo is on

https://react-without-buildsteps.vercel.app/

I hope you enjoy it.

Read the remake version of this article at Buka Corner.

Jogja, the project generator for web frameworks

Sony AK — Sat, 08 Apr 2023 14:23:44 +0000

Every web framework usually has its own CLI to generate project. Let say Next.js has npx create-next-app@latest or Vue.js has npm init vue@latest. Jogja makes create project easy for many web frameworks by using interactive menu.

Screenshot

It supports many famous and popular JavaScript web frameworks at the moments, such as Next.js, Vue.js, SvelteKit, Remix, Astro, AdonisJS and many more.

How to install?

npm i -g jogja

It will install jogja globally and after finish you can call jogja on your command prompt.

Just think jogja like an aggregator of create project CLI for many web framework to make create project easy and interactive way. Basically jogja will only run the each framework CLI command to create the new project.

That's it. Thanks for reading.

PHP Tips: How to Read Remote Text File and Download to Local

Sony AK — Wed, 25 Mar 2020 09:02:02 +0000

Who still use PHP? Raise your hand! Hahaha. OK, because of self-explanatory title, here is how to do it. We will use several functions on PHP for this purpose, such as fopen, feof, fgets, fwrite and fclose functions. Yes, that's lower level functions.

Scenario

Suppose we have remote text file stored on a website, let's called it

https://bolabanget.id/myfile.json

We want to create a PHP script that download that file (myfile.json) to our local computer with name (myfile.local.json).

Here is the script.

The Code

File: download_file.php

<?php
// open the source file with read-only mode
$source = fopen('https://bolabanget.id/myfile.json', "r") or die("Unable to open file!");
// prepare local file with write mode (if not exists it will try to create one)
$target = fopen('myfile.local.json', 'w') or die("Unable to open file");

// prepare variable for content of the source file
$content = '';

// tests for end-of-file on a source file pointer
while(!feof($source)) {
  // fgets will get line from file pointer
  $content .= fgets($source);
}

// write the $content variable to target file handle
fwrite($target, $content);

// close all open files from our operation above
fclose($source);
fclose($target);

Run it like below.

php download_file.php

If everything OK, you should have file myfile.local.json on your current folder.

Alternative Code

@hepisec comes with additional alternative on comments, we can do above task as well with the following code. This code using higher level functions such as file_get_contents and file_put_contents. Thank you!

<?php
$src = file_get_contents('https://bolabanget.id/myfile.json');
file_put_contents('myfile.local.json', $src);

I hope you enjoy it and any additional code or comments are welcome.

Credits

PHP Documentation at https://www.php.net/manual/en/
Cover photo by Christina Morillo at https://www.pexels.com/photo/two-women-looking-at-the-code-at-laptop-1181263/
Thanks to @hepisec for the additional code

PHP Quick Tip: How to check loaded extensions on CLI

Sony AK — Wed, 26 Feb 2020 03:41:15 +0000

Suppose we have PHP installed on our machine and we want to quick check what extensions loaded on our PHP. Plus you just want to know through CLI. It's easy.

Usually I just type this.

php -i

It will display complete information about PHP and all its configuration. It is similar like we call phpinfo() function.

The second is typing this command.

php -r "print_r(get_loaded_extensions());"

It will display loaded extensions only. The result example is like below.

Array
(
    [0] => Core
    [1] => date
    [2] => libxml
    [3] => openssl
    [4] => pcre
    [5] => zlib
    [6] => filter
    [7] => hash
    [8] => pcntl
    [9] => Reflection
    [10] => SPL
    [11] => sodium
    [12] => session
    [13] => standard
    [14] => mysqlnd
    [15] => PDO
    [16] => xml
    [17] => bcmath
    [18] => calendar
    [19] => ctype
    [20] => curl
    [21] => dom
    [22] => mbstring
    [23] => fileinfo
    [24] => ftp
    [25] => gd
    [26] => gettext
    [27] => iconv
    [28] => igbinary
    [29] => imap
    [30] => json
    [31] => exif
    [32] => msgpack
    [33] => mysqli
    [34] => pdo_mysql
    [35] => Phar
    [36] => posix
    [37] => readline
    [38] => shmop
    [39] => SimpleXML
    [40] => sockets
    [41] => sysvmsg
    [42] => sysvsem
    [43] => sysvshm
    [44] => tokenizer
    [45] => wddx
    [46] => xmlreader
    [47] => xmlwriter
    [48] => xsl
    [49] => memcached
    [50] => Zend OPcache
)

Thank you and I hope you enjoy it.

Credits

Cover image Pencil Shred by Pixabay from https://www.pexels.com/photo/cake-candy-celebration-chocolate-261738/

How to add git branch name to shell prompt in Ubuntu

Sony AK — Sat, 11 Jan 2020 12:28:17 +0000

When I work in a git repository directory that has many branches, I want to know which branch I am currently in on my shell prompt. Below is the sample output result.

Before my shell prompt is like this. Note suppose I am on folder ~/general/repos/playground.

sony@ubuntu:~/general/repos/playground$

We will create like this.

sony@ubuntu:~/general/repos/playground (master)$

On above example, I am on my playground git repository directory and it display the branch name master. It means I am on master branch now.

Today I will share how to create it.

Scenario

I want to add git branch name to my shell prompt when I am in a project repository directory. I am using Ubuntu, so the default shell is bash.

Step-by-step to go there

Step 1. Go to your shell prompt first.

Step 2. We have to know the current prompt setting, type like below.

echo $PS1

$PS1 is the enviroment variable that store the default prompt setting we see every time when we log in the console.

On mine, the setting is like below.

\[\e]0;\u@\h: \w\a\]${debian_chroot:+($debian_chroot)}\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[00m\]\$

Looks great.

Step 3. Open file ~/.bashrc

vi ~/.bashrc

Step 4. Add this function on the bottom of your ~/.bashrc file.

git_branch() {
  git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/(\1)/'
}

Step 5. Add this on the bottom of your ~/.bashrc file. Add the git_branch function on the shell prompt, by adding it on PS1 variable. Sample like below (that based on my $PS1 output above).

export PS1="\[\e]0;\u@\h: \w\a\]${debian_chroot:+($debian_chroot)}\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[00m\] \$(git_branch)\$ "

Step 6. You are done. Now save the file ~/.bashrc and run this command to reflect the changes.

source ~/.bashrc

Or you can close the terminal and re-open again to reflect the changes.

Now on my shell prompt will display like below.

sony@ubuntu:~/general/repos/playground (master)$

Add color to make it better

This is just additional cosmetics things. I will make the branch indicator (master) to green for foreground color. Add this \[\033[00;32m\]\$(git_branch)\[\033[00m\] to your PS1 variable. On mine is like below.

export PS1="\[\e]0;\u@\h: \w\a\]${debian_chroot:+($debian_chroot)}\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[00m\] \[\033[00;32m\]\$(git_branch)\[\033[00m\]\$ "

That's it.

Thank you and I hope you enjoy it.

Reference

Credits

Cover image is photo by Adrianna Calvo from Pexels at https://www.pexels.com/photo/sea-nature-beach-sand-21859/

How to start PHP built-in web server along with setting environment variable

Sony AK — Wed, 08 Jan 2020 04:58:15 +0000

I often use PHP built-in web server for my PHP projects during testing and development phase. The PHP projects in many cases using environment variable to define configuration or controlling app behaviour (e.g. running on prod or test environment).

Usual way

Setting environment variable can be done like this on Linux.

export NAME=VALUE

Start server with setting environment variables

If you want to set environment variable during the start of PHP built-in web server just type like this.

MYENV=myvalue php -S 0.0.0.0:8000

For setting multiple environment variables can be done like below.

MYENV=myvalue MYOTHERENV=myothervalue php -S 0.0.0.0:8000

If above not working, try this one as well.

MYENV=myvalue php -d variables_order=EGPCS -S 0.0.0.0:8000

On PHP you can get the environment variable with this code.

<?php
  echo getenv('MYENV');

On Windows you can do that via git-bash shell.

Thank you and I hope you enjoy it.