DEV Community: KIranuknow

Playwrite - Basics

KIranuknow — Fri, 28 Mar 2025 20:47:56 +0000

_How to Install _

pip install pytest-playwright
playwright install

How to run a program

If the file name starts without test*.py then just use this command. ex: file name myusecase.py

$ pytest <>.py
$ pytest myusecase.py

If the file name starts with test<>.py then no need to specify the file name when running

$ pytest

If you want to see the execution in a browser.

$pytest --headed --browser firefox

Record the flow and copy the code

$playwright codegen https://example.com

Playwrite Documentation: https://playwright.dev/python/docs/actionability

SAPUI5 - Table Cell Coloring

KIranuknow — Tue, 06 Aug 2024 15:53:37 +0000

We can color the table cells in SAPUI5's sap.ui.table using css.
There are two ways, one is to use customData in the template and formatter.

//using Javascript code for dynamically adding columns with css coloring.


 var oTable = new Table("idMyTable", {
                columns: [
                    new Column({
                        label: new Label({ text: "City" }),
                        template: new Text({
                            text: "{model>city}",
                            customData: [
                                new sap.ui.core.CustomData({
                                    key: "color",
                                    value: "{model>color}"
                                })
                            ]
                        }).addStyleClass("customText")
                    })
                ]
            });

//call the below function from the above column addition
 oTable.getRows().forEach(function(oRow) {
                        oRow.getCells().forEach(function(oCell) {
                            var sColor = oCell.data("color");
                            if (sColor) {
                                oCell.addStyleClass("customTextColor-" + sColor.toLowerCase());
                            }
                        });
                    });

Formatter:

var oNewColumn = new Column({
                label: new Label({ text: "Weight" }),
                template: new Text({
                    text: {
                        path: "Weight",
                        formatter: this.formatColor
                    }
                })
            });

            oTable.addColumn(oNewColumn);

//Formatter function
formatColor: function(sWeight) {
if (sWeight > 100) {
    this.addStyleClass("red");
} else {
    this.addStyleClass("green");
}

});

3rd Method

SAPUI5 - Typescript

KIranuknow — Tue, 23 Jul 2024 01:54:53 +0000

To dynamically add columns to a sap.ui.table.Table in SAPUI5 using TypeScript, you can follow these steps: Create a new column object.

import Column from "sap/ui/table/Column";
import Label from "sap/m/Label";
import Text from "sap/m/Text";

// ...

const newColumn = new Column({
    label: new Label({ text: "New Column" }), // Column header
    template: new Text({ text: "{propertyName}" }), // Binding to a property in your model
    width: "100px" // Optional width setting
});

Add the column to the table.

const myTable = this.byId("myTable") as sap.ui.table.Table;
myTable.addColumn(newColumn);

Example:

import Controller from "sap/ui/core/mvc/Controller";
import Column from "sap/ui/table/Column";
import Label from "sap/m/Label";
import Text from "sap/m/Text";

export default class MyController extends Controller {

    onAddColumn() {
        const newColumn = new Column({
            label: new Label({ text: "Dynamic Column" }),
            template: new Text({ text: "{myProperty}" }),
            width: "150px"
        });

        const myTable = this.byId("myTable") as sap.ui.table.Table;
        myTable.addColumn(newColumn);
    }
}

Typescript - Best Practices

KIranuknow — Thu, 11 Jul 2024 20:00:00 +0000

Let, Var and Const

Use const for variables that won't be reassigned.
Use let for variables that will be reassigned.
Avoid var in new TypeScript code.

Best References:
AWS TypeScript

Javascript to Typescript Tips

KIranuknow — Thu, 11 Jul 2024 02:57:32 +0000

Some of the tips in migrating existing JavaScript code to TypeScript.

JavaScript

var name = "test";

TypeScript

//declare fieldName as string
let name: string ;
name = "test";

Issue with NPM Package Installing Globally

KIranuknow — Wed, 03 Jul 2024 02:36:34 +0000

I was not able to install npm packages globally in mac os(using npm install -g), but able to install locally in the project. Installing locally in every project will increase the total node_modules folder size and for every project we need to install the same packages that will be tedious and unnecessary.

Here are the steps I performed.

I was using Homebrew to install node and npm. So,

Used command npm config get prefix - check where the npm actually points to. If this points to /opt/homebrew
Check if node_modules are installed in cd /usr/local/lib
If (2) is true, brew remove npm and then brew install npm
Now see if npm install -g express works

ref: https://stackoverflow.com/questions/22562041/global-installation-with-npm-doesnt-work-after-mac-os-x-mavericks-update

NPX vs NGX vs NPM

KIranuknow — Tue, 02 Jul 2024 15:03:49 +0000

npx: an npm package runner

ngx packages are used by Angular
ngx : used by Angular to run Angular projects.

NPM => Is a JS package manager.

NPX => Is a tool for executing Node packages and execute npm package binaries.

It is easy to remember:

-npm stands for MANAGER

-npx stands for EXECUTE

zsh: command not found ui5 tooling.

KIranuknow — Mon, 24 Jun 2024 17:47:24 +0000

To solve the "zsh: command not found: ui5" error when using UI5 tools locally installed in your project's node_modules on a Mac, you can try the following approaches:

Use npx to run the UI5 CLI:

Instead of calling ui5 directly, use npx ui5. This will look for the UI5 CLI in your project's node_modules and execute it.

npx ui5 <command>

Use the full path to the UI5 CLI:
You can run the UI5 CLI by specifying its full path in the node_modules folder:

./node_modules/.bin/ui5 <command>

Add node_modules/.bin to your PATH:
You can temporarily add the node_modules/.bin directory to your PATH for the current session:

export PATH=$PATH:./node_modules/.bin

After running this command, you should be able to use ui5 directly in that terminal session.

Use npm scripts:
Define scripts in your package.json file that use the locally installed UI5 CLI:


{
  "scripts": {
    "start": "ui5 serve",
    "build": "ui5 build"
  }
}

Then you can run these scripts using npm:

npm run start
npm run build

OpenUI - One prompt UI Generation

KIranuknow — Sat, 04 May 2024 23:27:45 +0000

I am trying to use OpenUI to generate a UI by using Ollama based Models.
I have already installed Ollama and different models.
Also, here I am going to install OpenUI in a virtual Environment called Conda instead of docker.



git clone https://github.com/wandb/openui
cd openui/backend
conda create -n openui python=3.10 anaconda
conda activate openui
pip install .
#this is not optional to give OPENAI API KEY, so just give xxx
export OPENAI_API_KEY=xxx
python -m openui

Go to browser and type the given URL to start OpenUI.
Now, you can go to settings and see the Ollama models are loaded automatically.

find more about conda here

Refer this Youtube link

All credits goes to Matthew Berman

Docker - a terminal GUI

KIranuknow — Thu, 25 Apr 2024 00:50:46 +0000

Installing in Ubuntu:



curl https://raw.githubusercontent.com/jesseduffield/lazydocker/master/scripts/install_update_linux.sh | bash

Give permissions:



sudo chown $USER /var/run/docker.sock

Run in the terminal:



lazydocker

References:
https://wiki.opensourceisawesome.com/books/docker-management-Ys2/page/install-lazydocker

https://stackoverflow.com/questions/48568172/docker-sock-permission-denied

Devika - docker

KIranuknow — Thu, 18 Apr 2024 12:52:01 +0000

Earlier in my post, I have given step by step instructions to install Devika locally.

Here I can give you some information to stop the containers.

Check for running containers in docker

sudo docker container ls

Stop containers with container name

sudo docker container stop devika-ollama-service-1
sudo docker container stop devika-devika-frontend-app-1
sudo docker container stop devika-devika-backend-engine-1

Devika - Install in local

KIranuknow — Thu, 18 Apr 2024 12:44:53 +0000

I have installed Devika locally using docker.
As a prerequisit, I have already installed docker in my ubuntu.

There are three main components in Devika,

Frontend server which runs on port 3000
Backend Server
Ollama and ollama LLM models which runs on port 11434

Devika can be use different non-open source LLM Models like OpenAI (chatgpt), ClaudeAI etc..

Here are step by step instructions.
Clone repository in your local directory using terminal.

git clone https://github.com/stitionai/devika.git
cd devika

copy config.toml and edit to update API keys.

cp sample.config.toml config.toml
sudo nano config.toml

Now, you can start installing process using docker compose. Devika's repository already contains docker compose file and no need to change anything.

sudo docker compose up

Now in the terminal, you can see the devika's containers starting.

finally you can see the port devika is running

You can go to browser and run localhost:3000.