Fueling Curiosity, One Insight at a Time

Recently I came across an interesting use case of combining CSS variables with environment variables. The challenge was to change a CSS property, particularly a color, based on an environment variable. Since CSS doesn't support environment variables directly, here's the approach I took:

The global css file:

:root {
  /* ----- fallback value ----- */
  --primary-color: #3498db;
}

h1 {
  color: var(--primary-color);
}

Then, in our React application:

const App = () => {
  const primaryColor = process.env.NAME === 'a' ? '#fff' : '#000';

  return (
    <div style={{ '--primary-color': primaryColor }}>
      <h1>Hello, World!</h1>
    </div>
  );
};

#css #cssvariables #react

Using choice Input in GitHub Actions

Choice input in Github actions can be used to provide a predefined list of options for workflow dispatch events. This makes it easier for users to select from a set of valid options when triggering workflows manually.

Example:

name: Example Workflow

on:
  workflow_dispatch:
    inputs:
      environment:
        description: 'Select the environment'
        required: true
        default: 'sandbox'
        type: choice
        options:
          - sandbox
          - uat
          - production

jobs:
  example_job:
    runs-on: ubuntu-latest
    steps:
      - name: Display Inputs
        run: |
          echo "Environment: ${{ github.event.inputs.environment }}"

#githubactions #devops #automation #dropdown

To generate an Entity-Relationship Diagram (ERD) using Prisma-erd-generator, follow these steps :
• Install the following package

npm i -D prisma-erd-generator @mermaid-js/mermaid-cli
# or
yarn add -D prisma-erd-generator @mermaid-js/mermaid-cli

• Add this to your schema.prisma

generator erd {
  provider = "prisma-erd-generator"
}

• Run the generator

npx prisma generate

#javascript #erd

To use Client Components, states, useState, useEffect, onClick, and other client-side features, add "use client" at the top of your file. This ensures the component runs on the client side.

#javascript #nextjs

Key difference between App router and Page router :

App Router:
• File-based routing: Uses nested folders to define routes.
• Components: Server Components by default.
• Data fetching: Uses fetch function.
• Layouts: Can be nested and dynamic.
• Dynamic routes: Supported, but syntax differs.
• Client-side navigation: Supported with router.push.
• Priority: Takes precedence over Page Router.
Page Router:
• File-based routing: Files directly represent routes.
• Components: Client Components by default.
• Data fetching: Uses getServerSideProps, getStaticProps, getInitialProps.
• Layouts: Static.
• Dynamic routes: Supported.
• Client-side navigation: Supported with Link component.
• Priority: Fallback if no matching route in App Router.
#javascript #nextjs

How to schedule tasks using cron expressions in GitHub Actions:
By defining a cron schedule in the workflow YAML file, we can automate the execution of tasks at specific intervals.
For instance, setting */5 * * * * in the cron expression triggers the workflow every 5 minutes.
Monitoring workflow runs in the "Actions" tab of the GitHub repository allows to verify that the scheduled tasks are executing as intended.
#cronjobs #workflowautomation

When terraform state file is locked and you are unable to acquire a state lock, you can use terraform force-unlock <LOCK_ID> to forcefully remove the lock.
#terrafrom

Use git reset --mixed HEAD~1 command to undo your last commit without losing the changes made in your last commit.

#git #gitReset #github

In TypeScript interfaces, ?: denotes optional properties. Here's an example:

interface User {
    name: string;
    age?: number; // Optional
}

const user1: User = { name: "Joe Mama" }; // Age is optional
const user2: User = { name: "Tony", age: 30 };

console.log(user1); // Output: { name: "Joe Mama" }
console.log(user2); // Output: { name: "Tony", age: 30 }

#javascript #typescript

Utility Types:
TypeScript's Utility Types simplify complex type manipulations. For instance, Partial<T> makes all properties of type T optional

interface User {
    id: number;
    name: string;
    email: string;
}

function displayUser(user: Partial<User>) {
    console.log(user);
}

displayuser({ name: "Joe Mama" }); // Partial<T> will make the properties optional hence this is valid

#javascript #typescript