DEV Community: Nwanguma Victor

Common Prettier Plugins & Installation

Nwanguma Victor — Thu, 29 Feb 2024 19:50:00 +0000

Installation

To get started, install prettier as a dev-dependency

npm install -D prettier

Install and add plugins to your Prettier config:

// prettier.config.js
module.exports = {
  plugins: ['prettier-plugin-organize-imports', 'prettier-plugin-tailwindcss'],
}

Typescript

npm i -D prettier-plugin-organize-imports

Tailwind

npm i -D prettier-plugin-tailwindcss

Compatibility with other Prettier plugins

This plugin uses Prettier APIs that can only be used by one plugin at a time, making it incompatible with other Prettier plugins implemented the same way. To solve this we've added explicit per-plugin workarounds that enable compatibility with the following Prettier plugins:

@ianvs/prettier-plugin-sort-imports

@prettier/plugin-pug

@shopify/prettier-plugin-liquid

@trivago/prettier-plugin-sort-imports

prettier-plugin-astro

prettier-plugin-css-order

prettier-plugin-import-sort

prettier-plugin-jsdoc

prettier-plugin-organize-attributes

prettier-plugin-organize-imports

prettier-plugin-style-order

prettier-plugin-svelte

prettier-plugin-sort-imports

One limitation with this approach is that prettier-plugin-tailwindcss must be loaded last.

// .prettierrc
{
  // ..
  "plugins": [
    "prettier-plugin-svelte",
    "prettier-plugin-organize-imports",
    "prettier-plugin-tailwindcss" // MUST come last
  ]
}

PHP

npm i -D @prettier/plugin-php

Laravel

npm i -D @shufo/prettier-plugin-blade

...

module.exports = {
    plugins: ['@shufo/prettier-plugin-blade'],
    overrides: [
        {
            files: ['*.blade.php'],
            options: {
                parser: 'blade',
                tabWidth: 2,
            },
        },
    ],
};

Prisma

npm i -D prettier-plugin-prisma

Java

npm i -D prettier-plugin-java

Minimalistic VSCode: Better Zen Mode in VSCode

Nwanguma Victor — Sat, 05 Aug 2023 03:24:32 +0000

This zen mode setup provides a seamless and focused coding experience by elegantly concealing default UI elements. The typical UI elements, such as sidebars, menus, and toolbars, gracefully fade away, allowing code to take center stage.

My Zen Workflow

Settings Cycler
Settings
Keybindings

Settings Cycler

Settings Cycler an extention that allows you to toggle settings with custom keybindings.

Settings

Paste these in your VSCode settings.json

{
  "settings.cycle": [
    {
      "id": "zenOn",
      "overrideWorkspaceSettings": true,
      "values": [
        {
          "workbench.activityBar.visible": false,
          "workbench.statusBar.visible": false,
          "workbench.editor.showTabs": false,
          "window.menuBarVisibility": "hidden",
          "workbench.layoutControl.enabled": false,
          "breadcrumbs.enabled": false,
          "workbench.tips.enabled": false,
          "editor.overviewRulerBorder": false,
          "window.commandCenter": false,
          "workbench.sideBar.location": "right",
          "window.title": "${folderName}${separator}${profileName}",
          "workbench.startupEditor": "none",
          "editor.minimap.enabled": false,
          "workbench.editor.decorations.colors": false,
          "workbench.editor.decorations.badges": false
        }
      ]
    },
    {
      "id": "zenOff",
      "overrideWorkspaceSettings": true,
      "values": [
        {
          "workbench.activityBar.visible": true,
          "workbench.statusBar.visible": true,
          "workbench.editor.showTabs": true,
          "window.menuBarVisibility": "classic",
          "workbench.layoutControl.enabled": true,
          "breadcrumbs.enabled": true,
          "workbench.tips.enabled": false,
          "editor.overviewRulerBorder": true,
          "window.commandCenter": true,
          "workbench.sideBar.location": "right",
          "window.title": "${folderName}${separator}${profileName}",
          "workbench.startupEditor": "none",
          "editor.minimap.enabled": false,
          "workbench.editor.decorations.colors": false,
          "workbench.editor.decorations.badges": false
        }
      ]
    }
  ]
}

Keybindings

Paste these in your keybindings.json

Windows

[
  {
    "key": "ctrl+k z",
    "command": "settings.cycle.zenOn"
  },
  {
    "key": "ctrl+k y",
    "command": "settings.cycle.zenOff"
  }
]

MacOS

[
  {
    "key": "cmd+k z",
    "command": "settings.cycle.zenOn"
  },
  {
    "key": "cmd+k y",
    "command": "settings.cycle.zenOff"
  }
]

Advantages of this Setup

Two seperate keybindings to turn zen mode on and off allows you to toggle any UI element and still easily revert back to zen mode
This setup is persistent globally and you don't need to toggle zen mode for every new project

Using Ant design Vue in Nuxt 3

Nwanguma Victor — Fri, 13 Jan 2023 06:57:20 +0000

1. Install Ant degin and ant design icons for Vue

yarn add ant-design-vue @ant-design/icons-vue

2. Create a new file named `antd.ts` under the plugins folder

Copy and paste this code inside

import {defineNuxtPlugin} from "#app";
import 'ant-design-vue/dist/antd.css';
import Antd from 'ant-design-vue';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(Antd)
})

3. Register your newly created plugin

import { defineNuxtConfig } from 'nuxt';

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    plugins:['@/plugins/antd']
})

4. Enjoy 🚀

From now you can enjoy Ant design by running your nuxtjs development server:

yarn dev

POV:

The current plugin registers all components. If you want to register only a few or want to do any customization please refer to Ant design docs and update your plugins/antd.ts
Yes, it adds typings

References

https://github.com/nuxt/framework/discussions/1208#discussioncomment-3589542

ReUsable UseFetch Utility in C#

Nwanguma Victor — Tue, 14 Jun 2022 10:33:25 +0000

This ReUsable UseFetch Utility used for API data fetching, it can serialize and deserialize objects on the fly.

Headers

using System;
using System.Collections.Generic;
using System.Net.Http;
using System.Net.Http.Headers;
using Newtonsoft.Json;

Class

public static class UseFetch
    {
        public static TResponse Get<TResponse>(string url,
            Dictionary<string, string> headers = null)
            where TResponse : class
        {
            try
            {
                var client = new HttpClient();
                client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));

                if (headers != null)
                {
                    foreach (var header in headers)
                    {
                        client.DefaultRequestHeaders.Add(header.Key, header.Value);
                    }
                }

                var response = client.GetAsync(url).Result;

                var responseString = response.Content.ReadAsStringAsync().Result;

                var deserializedResponse = JsonConvert.DeserializeObject<TResponse>(responseString);

                return deserializedResponse;
            }
            catch (Exception e)
            {
                throw new Exception(e.ToString());
            }
        }

        public static TResponse Post<TResponse, TRequest>(string url, TRequest request,
            Dictionary<string, string> headers = null)
            where TRequest : class, new()
            where TResponse : class
        {
            try
            {
                var serializeRequest = JsonConvert.SerializeObject(request);

                var content = new StringContent(serializeRequest);
                content.Headers.ContentType = new MediaTypeHeaderValue("application/json");

                var client = new HttpClient();
                client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));

                if (headers != null)
                {
                    foreach (var header in headers)
                    {
                        client.DefaultRequestHeaders.Add(header.Key, header.Value);
                    }
                }

                var response = client.PostAsync(url, content).Result;

                var responseString = response.Content.ReadAsStringAsync().Result;

                var deserializedResponse = JsonConvert.DeserializeObject<TResponse>(responseString);

                return deserializedResponse;
            }
            catch (Exception e)
            {
                throw new Exception(e.ToString());
            }
        }
    }

enjoy 🚀

Adding, Renaming, & Removing Columns from Existing Tables Using Tinker in Laravel

Nwanguma Victor — Wed, 01 Jun 2022 13:16:34 +0000

Enter Into Tinker Environment

On the CLI run artisan command to enter into tinker environment

php artisan tinker

Adding Columns

Run the suggested code directly from Tinker.

Schema::table('<YOUR TABLE>', function ($table) {
    $table->string('name')->nullable()
        ->after('<DESIRED COLUMN>'); // add after desired column
});

Renaming Columns

Run the suggested code directly from Tinker.

Schema::table('<YOUR TABLE>', function ($table) {
    $table->renameColumn('<FROM>', '<TO>');
});

Removing Columns

Run the suggested code directly from Tinker.

Schema::table('<YOUR TABLE>', function ($table) {
   $table->dropColumn('<DESIRED COLUMN>');
});

You may drop multiple columns from a table by passing an array of column names to the dropColumn method:

Schema::table('<YOUR TABLE>', function ($table) {
   $table->dropColumn(['<DESIRED COLUMN>', '<DESIRED COLUMN 1>']);
});

Note

You can also use arrow functions

Schema::table('<YOUR TABLE>', fn($t)=> $t->string('<DESIRED COLUMN>')->nullable());

How to run an application automatically after startup on Windows

Nwanguma Victor — Tue, 12 Apr 2022 09:35:55 +0000

For those who use applications like TaskbarX, and would like the app to run automatically on Windows start-up, this article is for you.

Step 1: Press Windows + R on the keyboard.
Step 2: Enter shell:Common Startup and run.
Step 3: Step 2 should open this window, then Copy and paste the program shortcut.

Enjoy 🚀

An Opiniated React Stack

Nwanguma Victor — Sat, 02 Apr 2022 10:40:20 +0000

Simplicity & Aesthetics over Complexity
Life is too sweet to be loosing sleep over trying to understand how a library or framework works, as long as a solution or library is working and has long term support I'm okay with it

Recoil JS

Example with async queries

using `useRecoilValueLoadable` hook.

This hook is intended to be used for reading the value of asynchronous selectors. This hook will implicitly subscribe the component to the given state.

This hooks returns a Loadable object for the current state with the following interface:

state: Indicates the status of the selector. Possible values are 'hasValue', 'hasError', 'loading'.
contents: The value represented by this Loadable. If the state is 'hasValue', it is the actual value, if the state is 'hasError' it is the Error object that was thrown, and if the state is 'loading', then it is a Promise of the value.

The example code below implements useRecoilValueLoadable hook from recoilJS using Next JS, in a use-case when implementing private routes using HOC

import { useRouter } from "next/router";
import React from "react";
import { useRecoilValueLoadable } from "recoil";
import getAuthUser from "../store/selectors/getAuthUser";

const withAuthConsumer = (WrappedComponent: any) => {
  return (props: any) => {
    const authUser = useRecoilValueLoadable(getAuthUser);
    const router = useRouter();

    // checks whether we are on client / browser or server.
    if (typeof window !== "undefined") {
      if (authUser.state == "loading") {
        return null;
      }

      if (
        authUser.state == "hasValue" &&
        authUser.contents?.user_type == "consumer"
      ) {
        return <WrappedComponent {...props} />;
      } else if (
        authUser.state == "hasValue" &&
        authUser.contents?.user_type == null
      ) {
        router.push("/auth/login");
        return null;
      } else {
        router.push("/auth/login");
        return null;
      }
    }
    // If we are on server, return null
    return null;
  };
};

export default withAuthConsumer;

Check this useRecoilValueLoadable for more explanation.

Html to jsx

https://htmltojsx.in/

C# for dummies: Classes / Objects, Fields, Access Modifiers, Properties, Constructors

Nwanguma Victor — Thu, 24 Mar 2022 09:31:18 +0000

This tutorial assumes you have background or existing knowledge of programming.

C# CLASSES / OBJECTS

A class is a template for objects, and an object is an instance of a class. Objects are entities inside a class.
Example: color is an object of class car.

class Car 
{
  string color = "red";
}

C# FIELDS (variables)

A variable declared directly in a class is often referred to as a field (or attribute).
Example

int myNum = 5;               // Integer (whole number)
double myDoubleNum = 5.99D;  // Floating point number
char myLetter = 'D';         // Character
bool myBool = true;          // Boolean
string myText = "Hello";     // String

C# ACCESS MODIFIERS

Access modifiers are keywords which are used to set the access level/visibility for classes, fields, methods and properties.
Examples
public, private & protected: Are what you would probably only use, unless you reach god level status 😂.

internal: Are for gods.

C# PROPERTIES

Properties are just fields (variables) with access modifiers, the moment you put "public, etc." on a field (variable) it becomes a property.
Example

class Car
{
  public string model;  // public
  private string year;   // private
  string type; // private

  // The `{set; get;}` means you can access and change the property.
  public string model {set; get;} // public
}

C# CONSTRUCTORS

A constructor is a special method that is used to initialize objects.

💡 A constructor is a method that gets called or runs when a class is created.
It can be used to set initial values for fields.
The constructor name must match the class name.
It cannot have a return type (like void or int).

All classes have constructors by default: if you do not create a class constructor yourself, C# creates one for you. However, then you are not able to set initial values for fields.

// Create a Car class
class Car
{
  public string model;  // Create a field

  // Create a class constructor for the Car class
  public Car()
  {
    model = "Mustang"; // Set the initial value for model
  }

  static void Main(string[] args)
  {
    Car Ford = new Car();  // Create an object of the Car Class (this will call the constructor)
    Console.WriteLine(Ford.model);  // Print the value of model
  }
}

// Outputs "Mustang"

CONSTRUCTOR PARAMETERS

Constructors can also take parameters, which is used to initialize fields.

class Car
{
  public string model;
  public string color;
  public int year;

  // Create a class constructor with single or multiple parameters
  public Car(string modelName, string modelColor, int modelYear)
  {
    model = modelName;
    color = modelColor;
    year = modelYear;
  }

  static void Main(string[] args)
  {
    Car Ford = new Car("Mustang", "Red", 1969);
    Console.WriteLine(Ford.color + " " + Ford.year + " " + Ford.model);
  }
}

// Outputs Red 1969 Mustang

REFERENCES

w3schools

Scalable Reusable Components in React

Nwanguma Victor — Wed, 16 Mar 2022 08:03:45 +0000

I will briefly go over this tutorial, with an example ErrorAlert component.

The Problem

When creating reusable components people will naturally feel passing what the component needs as props would be right, but over time that component would become this:

<ErrorAlert
    data={...}
    type={...}
    closeIcon={...}
    className={...}
    onInit={...}
    onClose={...}
/>

You don't need me to tell you the disadvantages of this approach in the long run.

The Solution

import { IonIcon } from "@ionic/react";
import { alertCircleOutline } from "ionicons/icons";
import React from "react";

interface IEssentials {
  className?: string;
}

const Body: React.FC<IEssentials> = ({ children, className, ...rest }) => {
  return (
    <div className={"p-4 text-sm text-red-700 bg-red-100 rounded-lg dark:bg-red-200 dark:text-red-800" + " " + className} {...rest} role="alert">
      {children}
    </div>
  );
};

const Text: React.FC<IEssentials> = ({ children, className, ...rest }) => {
  return (
    <div className={"flex items-center gap-1" + " " + className} {...rest}>
      <IonIcon icon={alertCircleOutline} />
      <div>{children}</div>
    </div>
  );
};

export const ErrorAlert = { Body, Text };

Usage

import { ErrorAlert } from "./ErrorAlert.tsx"

const data = [...];

const App: React.FC = () => {
    return (
        <div>
            <ErrorAlert.Body>
               {data.map((dataItem) => (
                  <ErrorAlert.Text>
                     {dataItem}
                  </ErrorAlert.Text>
               ))}
            </ErrorAlert.Body>
        </div>
    )
}

Advantages of this approach

Open/Closed principle (SOLID): It should be open to extend but closed for modification.
Single Responsibility Principle (SOLID): Individual child components should have a single responsibility or perform a single function, this approach makes it easier to extend without having to modify the whole component.
Decoupling enables adding explicit functionalities based on requirements.
Easy refactoring.

#1 Tip for Readable Code Across Teams and Personal Projects

Nwanguma Victor — Tue, 08 Mar 2022 13:13:10 +0000

Have you ever written code and months later you come back to that same code and be like "what the heck was I thinking".

💡 Tip: You can easily put links referencing the documentation, site or stack overflow question from where you got that cool and fancy one-liner, solution or concept.

It helps if you think someone else would have a hard time understanding your code

// https://laravel.com/docs/9.x/collections#method-collapse
// https://stackoverflow.com/questions/62872479/laravel-incorrect-json-response-structure-when-using-unique

$collection = collect([
    $abc,
    $validated['abc']
])->collapse()->unique()->values();

Advantages of this approach

Team members can easily understand what's going on in the code directly from the source or from other examples.
It helps Junior developers understand the codebase better.
It's easy to adopt into any team or project.
Easy adoption ensures consistent comments across teams.

Simple Environmental Variable Setup in React and Node Applications

Nwanguma Victor — Mon, 28 Feb 2022 12:35:00 +0000

env-cmd provides a simple and efficient method for configuring environmental variables.

Install

npm install env-cmd 
or 
npm install -g env-cmd

Usage

There are two methods of usage.

Method 1

It involves using different .env files e.g .env.development, .env.staging, .env.production.

- For an enviroment file .env at the root directory.

./env

# This is a comment

REACT_APP_APPLICATION_NAME=TodoApp
REACT_APP_API_BASEURL=http://api.test.com

Package.json

{
  "scripts": {
    "start": "env-cmd react-scripts start"
  }
}

- Using custom env file .env.development or file path ./abc/def/.env

./env.development

# This is a comment

REACT_APP_APPLICATION_NAME=TodoApp
REACT_APP_API_BASEURL=http://api.test.com

Package.json

{
  "scripts": {
    "start": "env-cmd -f ./env.development react-scripts start"
  }
}

Method 2

Like me, if you like to put all your environments in one file.
Create .env-cmdrc.json at the root directory.

./env-cmdrc.json

{
  "development": {
    "REACT_APP_APPLICATION_NAME": "TodoApp",
    "REACT_APP_API_BASEURL": "http://api.test.com"
  },
  "staging": {
    "REACT_APP_APPLICATION_NAME": "TodoApp",
    "REACT_APP_API_BASEURL": "http://staging.test.com"
  },
  "production": {
    "REACT_APP_APPLICATION_NAME": "TodoApp",
    "REACT_APP_API_BASEURL": "http://production.test.com"
  }
}

Package.json

{
  "scripts": {
    "start": "env-cmd -e development react-scripts start"
  }
}

or

{
  "scripts": {
    "start": "env-cmd -e production react-scripts start"
  }
}

Hope you find this helpful !

Quick Prototyping with Tailwind and DaisyUI

Nwanguma Victor — Mon, 21 Feb 2022 12:57:51 +0000

For quick prototyping I use Tailwind and DaisyUI CDNs.
Note: The order of the CDNs.

<link href="https://cdn.jsdelivr.net/npm/daisyui@1.25.4/dist/full.css" rel="stylesheet" type="text/css" />
<link href="./theme.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2/dist/tailwind.min.css" rel="stylesheet" type="text/css" />

To customize the default theme of DaisyUI, copy and paste the CSS variables into theme.css.
Note: The colors are in HSL format.

/* theme.css */

:root {
  --p: 140 52% 55%;
  --pf: 120 100% 25%;
  --pc: 0 0% 100%;
  --s: 314 100% 47.1%;
  --sf: 314 100% 37.1%;
  --sc: 0 0% 100%;
  --a: 174 60% 51%;
  --af: 174 59.8% 41%;
  --ac: 0 0% 100%;
  --n: 219 14.1% 27.8%;
  --nf: 222 13.4% 19%;
  --nc: 0 0% 100%;
  --b1: 0 0% 100%;
  --b2: 210 20% 98%;
  --b3: 216 12.2% 83.9%;
  --bc: 215 27.9% 16.9%;
  --in: 207 89.8% 53.9%;
  --su: 174 100% 29%;
  --wa: 36 100% 50%;
  --er: 14 100% 57.1%;
  --border-color: var(--b3);
  --rounded-box: 1rem;
  --rounded-btn: 0.5rem;
  --rounded-badge: 1.9rem;
  --animation-btn: 0.25s;
  --animation-input: 0.2s;
  --btn-text-case: none;
  --btn-focus-scale: 0.95;
  --navbar-padding: 0.5rem;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 0.5rem;
}

For Theming
daisyUI comes with a number of themes, which you can use with no extra effort. Each theme defines a set of colors which will be used on all daisyUI elements. To use a theme, add data-theme attribute to your tag.

<html data-theme="light"></html>

DEV Community: Nwanguma Victor

Common Prettier Plugins & Installation

Installation

Typescript

Tailwind

PHP

Laravel

Prisma

Java

Minimalistic VSCode: Better Zen Mode in VSCode

My Zen Workflow

Settings Cycler

Settings

Keybindings

Windows

MacOS

Advantages of this Setup

Using Ant design Vue in Nuxt 3

1. Install Ant degin and ant design icons for Vue

2. Create a new file named antd.ts under the plugins folder

3. Register your newly created plugin

4. Enjoy 🚀

References

ReUsable UseFetch Utility in C#

Headers

Class

Adding, Renaming, & Removing Columns from Existing Tables Using Tinker in Laravel

Enter Into Tinker Environment

Adding Columns

Renaming Columns

Removing Columns

Note

How to run an application automatically after startup on Windows

An Opiniated React Stack

Recoil JS

Example with async queries

using useRecoilValueLoadable hook.

Html to jsx

C# for dummies: Classes / Objects, Fields, Access Modifiers, Properties, Constructors

C# CLASSES / OBJECTS

C# FIELDS (variables)

C# ACCESS MODIFIERS

C# PROPERTIES

C# CONSTRUCTORS

CONSTRUCTOR PARAMETERS

REFERENCES

Scalable Reusable Components in React

The Problem

The Solution

Advantages of this approach

#1 Tip for Readable Code Across Teams and Personal Projects

Advantages of this approach

Simple Environmental Variable Setup in React and Node Applications

Install

Usage

Method 1

Method 2

Quick Prototyping with Tailwind and DaisyUI

2. Create a new file named `antd.ts` under the plugins folder

using `useRecoilValueLoadable` hook.