DEV Community: MANOJ AP

Parallels and MSSQL Server

MANOJ AP — Thu, 28 Sep 2023 04:48:38 +0000

I recently purchased a Mac-Mini-M2 (Base Model), it was awesome and fast enough to kill my Windows 11 Laptop , :). Since I am supposed to develop Mac and Windows, also looking for a VM which utilise the power of M2 Silicon.

Development setup on Parallels

Firstly I installed Microsoft Visual Studio ,and it work better than ** ASUS Laptop with 8 GB Intel Core i5**

Also need a Microsoft SQL Server for backend needs and I started the install the setup, it just went with errors.

Docker

The second option for me is Docker on the Parallel. I tried and it succesfulluy installed. But the engine doesn't work for me. I google it, since it is container it is not possible.

Docker Solution

Docker container on Mac OS - That will be work right. Note that Some of the Docker Images (most) were built for Intel M1 chip. In such cases need to install Rosetta first, which help the transition of Intel to silicone.

softwareupdate--install--rosetta

How do I connect Mac Docker to Parallel Visual Studio ?

We can simply use the Mac IP with container exposed port as bellow. Go to Network click the Network option to get the IP.


 <add name="Dolphin_Accounts.Properties.Settings.sql_connection" connectionString="Data Source=192.168.20.101,1433;Password=mssql1Ipw;User Id=sa;Initial Catalog=dolphinedb;Integrated Security=False" />

The Docker Compose iml

`version: '3.9'

services:
mssql-azur-edge2:
image: mcr.microsoft.com/azure-sql-edge
platform: linux/arm64
ports:
- 1433:1433

volumes:
- ~/apps/mssql/data:/var/lib/mssqlql/data
environment:
- ACCEPT_EULA=Y
- SA_PASSWORD=mssql1Ipw

From the terminal run docker-compose up -d and also make sure it is running by issuing the docker-compose ps command.

More post on M2,Docker and Mac-Mini-M2 setup

React client error

MANOJ AP — Tue, 31 May 2022 05:32:02 +0000

When I work with react-quill and react-editor-js I got either a double instance or an error which shows react-dom/client error.

I fix problem by using render method. The two of the cases caused by the same.

Editorjs

Quilljs

index.js

`import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(

);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();`

Fix worked for me.

import ReactDOM from "react-dom";
import React from "react";
// import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
// const root = createRoot(rootElement);
ReactDOM.render(, rootElement);

My question is that, why this happening ?

More thoughts on JSU

Cross-thread operation not valid fix - C# back ground worker

MANOJ AP — Tue, 12 Apr 2022 12:10:12 +0000

How to fix

When you try to access a component in the UI from a Background Worker DoWork event in C#.net, may end up like this.

System.InvalidOperationException: 'Cross-thread operation not valid: Control 'listView1' accessed from a thread other than the thread it was created on...

Solution

To bypass this error C#.Net provides *invoke * method which execute the **delegate **specified.

Invoke let us directly interact from other threads.

To add items to a listview from a background worker I used the following code snippet which uses a *MethodInvoker **and a **delegate *

listView1.Invoke(new MethodInvoker(delegate { item = new ListViewItem(""); item.SubItems.Add(new ListViewItem.ListViewSubItem(item, "Some Column Value Here")); listView1.Items.Add(item); } ));

Here is some guides that can save your time how to , snippets-various

How to Containerize Golang app with Docker

MANOJ AP — Sat, 26 Feb 2022 04:08:22 +0000

To containerize a Golang app is similar to any other project. We need to use the base image for golandg and build the app.

Install Docker desktop , if you are on windows and create an account first. Then in the project create Dockerfile ( no extension required) with following command.

FROM  golang:1.18beta2-bullseye
RUN mkdir /app
ADD . /app
WORKDIR /app
RUN go build -o main .
CMD ["/app/main"]

Save the file in root of the project

Building the Docker Image

Go to the terminal and CD into the project folder and build the image. Docker image can be used to run different process.

docker build -t my-go-app .

try to list image using docker images command.

docker images

Using the image

To use the image we created with run command.

docker run -d -p 8080:8080 --name test1 my-go-app

The above command will run the image in detached mode, leaving console reedy for another execution.

It also exposed to port internal 8080:8080. Go to the browser and try localhost:8080 and it should have working.

Stopping, Starting and removing containers

Using docker stop <container-name/id>. Once it stopped can delete using docker rm container-name/id command.

Need to start again ? use the docker start command.

Wanna know running processes/ containers ? Try docker ps.

Here is more guides on

GCC erron Golang

MANOJ AP — Wed, 09 Feb 2022 03:55:47 +0000

On windows you may got the gcc compiler error while trying to add packages like "gorm.io/driver/sqlite" in Golang. The cause for the error is that, underlying package require the gcc C compiler which is not installed on Windows PC by default.

Solution

We need to install the C compiler (gcc) on Windows machine and also need to add the path to environment variable.

The easiest way to install the mingw, is get package from tmd-gcc repository.

Also add the path to the bin folder as follows, in environment variables. (Just type env on start menu and you will get environment variables dialog)

C:\TDM-GCC-64\bin

Flutter listview crashes in Column widget

MANOJ AP — Tue, 18 Jan 2022 03:41:07 +0000

Listview and Column Widget

Sometimes you may want to combine UI vertically along the screen, that’s were we need a Column Widget.

When I tried to place a search box, a customized Text widget, and ListView widget, Flutter shower with errors.

Column( children: [ SearchBox(hintText: 'Search', controller: textController), ListView.builder( // the number of items in the list itemCount: adList.length,

This happens because in the column widget Listview didn’t fit. To make it adjustable for the column wrap the ListView with Expanded widget, in case of Vertical listview.

The expanded widget can have single child widget.

Column( children: [ SearchBox(hintText: 'Search', controller: textController), Expanded( child: ListView.builder(

and it should solve the issue.

Following Flutter posts deserve a good read

Flutter Desktop Support - OpenSuse
Flutter support for Windows

Easiest way to handle multiple styles in Reactjs

MANOJ AP — Tue, 18 Jan 2022 03:33:34 +0000

Reactjs

Reactjs is a frontend UI library for developing sophisticated web/native applications using Typescript/Javascript. The library is backed by Facebook and opensource community. For me it is like having a swiss knife in my tool kit.

Multiple Styles

For beginners handling styles in React components could difficult. When it came to styles with hyphen (back-style) we have to rely on array syntax.

<div className={styles['back-style']}>

So what about multiple styles ? We can use the array syntax or use the classNames package (multiple use of className property is not allowed in Reactjs as Vue 3 )

Let’s use the package

yarn add classnames

In the template / HTML use the classNames function to include multiple style classes.

import classNames from 'classNames' <div className={classNames('font-style','back-style','container')}

That’s all you need to know.

Create Mui Dark Mode switch using React Context

MANOJ AP — Sun, 05 Dec 2021 04:48:11 +0000

Material UI or MUI is one word for all UI needs in Reactjs. It is well documented and easy to use. I really enjoyed it.
In this post I would like to demonstrate how to create dark-mode switcher using the React Context and Material UI switch component.

Context

please use these posts to learn more about Context and the basic step required.

Our context setup with look like the following

//context/themeContext.js
 import React from 'react';

export const ThemeContext = React.createContext({
    theme: 'dark',
    setTheme: () => { }
  })


 //app.js or _app.js

import React, { useState } from 'react'; 
import { ThemeContext } from '../context/themeContext';


function MyApp({ Component, pageProps }) {
  const [theme, setTheme] = useState("light")
  const value = { theme, setTheme };


  return (

      <ThemeContext.Provider value={value}   >
        <Component {...pageProps} />
      </ThemeContext.Provider>

  );
}
```


## Theme Switcher 

A MUI customized switch can be used to create a theme switcher. We also need to access the context using the useContext hook. The code will look like the following. 

> The complete switch snippet can be obtained from [Material UI switch documentation page](https://mui.com/components/switches/).



```
import * as React from 'react';
import clsx from 'clsx';
import { styled } from '@mui/system';
import { useSwitch } from '@mui/core/SwitchUnstyled';
import { Tooltip } from '@mui/material';
import { ThemeContext } from '../context/themeContext';
 ...
function MUISwitch(props) {
  const { theme, setTheme } = React.useContext(ThemeContext)
  const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
  const stateClasses = {
    checked,
    disabled,
    focusVisible,
  };
  var mode = {

  };


  React.useEffect(() => {
    const mode = stateClasses.checked ? 'dark' : 'light'
    setTheme(mode)
  }, [stateClasses])
  return (
    <Tooltip title="Theme switcher">
      <SwitchRoot className={clsx(stateClasses)} >
        <SwitchTrack>
          <SwitchThumb className={clsx(stateClasses)} />
        </SwitchTrack>
        <SwitchInput {...getInputProps()} aria-label="Demo switch" />
      </SwitchRoot>
    </Tooltip>

  );
}

export default function UseSwitchesCustom() {
  return <MUISwitch defaultChecked />;
}
```



## Tracking changes

In order observe changes in state of the switch component , we can use useEffect and the **stateClass**. Note that there is no event handler attached to the component.

## Implement the Theme

The theme can be implemented as you wish, one of the suggested way is to create a component to implement the theme and wrap other components inside it. Such a component can be .



```
import React from 'react'
import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
import { ThemeContext } from '../context/themeContext';

export default function BaseTheme(props) {
    const { theme, setTheme } = React.useContext(ThemeContext)
    const theme1 = createTheme(
        {
            palette:
                { mode: theme }
        }
    );

    console.log('Current Theme - ' + JSON.stringify(theme));
    return (
        <div>
            <ThemeProvider theme={theme1} >
                {props.children}
            </ThemeProvider>
        </div>
    )
}
```



Read more react posts [On My blog](https://devguides.vercel.app)

Setup Pinia in Nuxt 3

MANOJ AP — Sun, 28 Nov 2021 06:22:51 +0000

May be you are already learned about global state and the Vuex store in Vue and Nuxt projects. Is there any other store for Vue3. Yes, Pinia

A minimal app is required to try Pinia store, let's create a nuxt3 app.

Setup Pinia store in a Nuxt3 app

A minimal app is required to try Pinia store, let's create a nuxt3 app.

npx nuxi init nuxt3-app

To setup Pinia store add the Nuxt build module configuration, in nuxt-config, may be the yarn installation will already add it for you,lol.

yarn add pinia @pinia/nuxt

The nuxt config will look like this

// nuxt.config.js
export default {
  // ... other options
  buildModules: [
    '@pinia/nuxt',
  ],
}

Create the store

Go ahead and create store.ts in the src folder. Pinia uses same philosophy of Vuex, the official Vue store.

//store.ts
import { defineStore, acceptHMRUpdate} from 'pinia'

export const useStore = defineStore('storeId', {
  // arrow function recommended for full type inference
  state: () => {
    return {
      // all these properties will have their type inferred automatically
      counter: 10,
      name: 'Eduardo',
      isAdmin: true,
    }
  },
  actions:{
     hit(){
       this.counter++;
     }
  },

  getters:{
    getCount:(state)=>state.counter,
    getUser: (state)=> {
      state.name
    }
  }
})

if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useStore, import.meta.hot))
}

Accessing the state

Accessing the state / getters / actions in a component by using the useStore. Sorry about mutation they are gone for ever.

//in some component
<script>
import { useStore } from '@/store'
export default {  
  data() {
    return {
      store: useStore()
    }
  },
}
</script>

In the template we can use the reactive store to access actions/ getter/ state.

State

A single state can be accessed as follows

<template>   
   <div>
    {{store.name}}
......

Getters

Getters are functions which return the read only state for stores, which can be also accessed with store object and insert in template with my favorite double mustache.

<template> {{store.getCount}} ......

Actions

Actions are for making something happen, like increasing a count, or validating a user etc.

<v-btn @click="store.hit()">Hit me</v-btn>

Placing text box in WPF DataGrid manually

MANOJ AP — Fri, 13 Aug 2021 04:55:37 +0000

I want to build a sales order form, where customer enter order details. Need to enter rows. wanna place boxes manually on the grid, which move to the row I clicked. I don't want the built in columns

Any body have an advice ?

How to handle Slatejs document in Nxut-Keystone5

MANOJ AP — Tue, 10 Aug 2021 14:18:37 +0000

I have a Nuxt-Keystone project in which have a list(keystone schema) called Post with post body as content type which is a slatejs document

Problem

I tried many way to output the post body (Document), it didn't work for me.

Anybody know how to handle slatejs docs in a Vue component ? Please give me a hand.

Nuxt graphql server-middleware API

MANOJ AP — Tue, 27 Jul 2021 03:48:06 +0000

Graphql

Graphql is modern an alternative approach for the REST API invented by Facebook. It is used for fetch data from a server and put data back to a server , just like the regular API does.

The Graphql shines where you want to fetch few data (required), where REST API fetch a bunch of data, it may cause fetching too much data. API have multiple end points where graphql have one. One of the problem with graphql, it is not simple to create a graphql server, even though once it has been done ,using them is quiet simple.

Apollo and Express

With Apollo server we can build and run a graphql server, for creating route for our graphql end point can utilize the node developers favorite express module

Prisma

Prisma is a ORM for JavaScript and Typescript, it let developers easily configure, create / migrate databases using models. One of the cool feature I love mostly is that , it can be configured with few CLI commands like init, migrate

For initializing the Prisma install the developer dependency npm i -d prisma and initialize prisma with

npx prisma init

It will generate necessary files under Prisma folder, please open the file and configure database and models. For demonstration I have configured a Sqlite database, you can use other databases like mysql, postgres, Mongodb etc.

//schema.prisma

datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

generator client {
  provider = "prisma-client-js"
}

model Contact{
  id String @id @default(uuid())
  name String
  email String
}

Note the id field in the model, it is a primary key and also auto filled by the uuid() function. One you done models go to generate the real database with migrate command

npx prisam migrate dev --name init

This will generate the tables using the models we defined, to make sure we can use the prisma studio which runs on the port 555, also a standalone studio app is available.

// run in new terminal
npmx prisma studio

In the nuxtjs app we need the dependency @prisma/client, let's add them to our project

nmp i -s @prisma/client

Graphql API

In the Nuxt app , we can setup internal API for interacting with database using server middleware.
In the project folder create a folder api and inside the folder create a file graphql.ts

For create and run server routes, we can use the express framework the API should export the handler as in Nextjs.

const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');
const {PrismaClient} = require("@prisma/client") 
const prisma = new PrismaClient();
const typeDefs = gql`

   type Todo{
        item:String!,        
        id:String
   }

   type Query{
       getAll: [Todo!]!
   }

   type Mutation{
       newTodo(item :String!):Todo
   } 
`;

const resolvers = {
    Query: {
        getAll() {
            return   prisma.todo.findMany();
        }
    },

    Mutation: {
      async  newTodo(_parent: any, _args: any) {

          const newTodo = await prisma.todo.create({
              data:_args
          });
            return newTodo;
        }
    }
};
const server = new ApolloServer({
typeDefs,
resolvers
});

const app = express();
server.start().then((r: any) => {
    server.applyMiddleware({ app });    
});

export default {
    path: "/api",
    handler: app
  };

typeDefs

typedefs constant contains graphql type definitions, Query and Mutations, it can be a user defined objects with multiple keys. For a complete data type list refer the official documentation.

Query

As the name suggest the query is used to fetch some data, it uses the array synatax to fetch data.

Mutations

Mutations are for defining graphql part of create,update,delete functions.

Resolvers

So the first part of our graphql is done with type,query and Mutations. But this is not enough, these are structures, we have to make them working, with resolver function.
Resolvers are function to make the Query and Mutation in motion.

Nuxt-config

For using Prisma client we need to use PrismaClient object. The API would not work at this point, it also required setup a middleware in the dedicated nuxt-config.

 export default {
   // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
   ssr: false,
   serverMiddleware:[
     '~/api/graphql.ts',
   ] ,  
     .....

and now the graphql playground  can be accessed at http://localhost:3000/api/graphql