DEV Community: Saroj Pradhan

Add S.N(Serial Number)/Extra Column in React-Tables V7.

Saroj Pradhan — Sun, 18 Dec 2022 07:42:35 +0000

Q. Who is this article for?

For those who have used React-Tables and are stuck while adding S.N or an extra column in React-Tables.

Here,

const fields = ['s.n', 'title', 'url', 'state'];

If columns are fetched from backend/api and you want to add the "S.N" column, then

const columnFields = ['s.n'];
columnFields.push(...fields);

Continue reading at : blazecodes.pradhansaroj.com.np

What is Inertiajs? No API required to connect Backend and Frontend?

Saroj Pradhan — Wed, 14 Dec 2022 17:22:36 +0000

Inertia.js is an approach that allows you to build single-page applications (SPAs) using server-side rendering and traditional server-side routing. In other words, it allows you to build SPAs using just PHP (Laravel), Ruby (Rails), or any other server-side language, and client-side framework such as React, Vuejs without worrying about maintaining two different repository, two different domain to host backend and frontend separately.

Inertia has no client-side routing, nor does it require an API. Simply you can build controllers and page views in easier way.

One of the easiest methods to get started with React/Vue, Inertiajs and Laravel is by installing Laravel/breeze scaffolding:

Start a Laravel Project

composer create-project laravel/laravel laravel-inertia-react

Install laravel/breeze in your laravel project.

composer require laravel/breeze --dev

Then install the frontend scaffolding as per your desire

php artisan breeze:install vue

# Or...

php artisan breeze:install react

php artisan migrate
npm install
npm run dev

Run server to view the Laravel/breeze default authentication scaffolding.

php artisan serve

Note: Inertia is not appropriate for those who value SEO, even though inertia make life easier to integrate frontend and backend.

Useful links: Inertiajs, Laravel-breeze

If you liked this post please leave a reaction/comment.

What is CI/CD?

Saroj Pradhan — Sat, 10 Dec 2022 11:49:12 +0000

CI stands for Continuous Integration, and it is a software engineering practice that involves merging all development work into a single codebase several times a day. This practice helps to ensure that all code changes are tested, and that the codebase remains in a releasable state at all times.

Continuous Delivery is also a software engineering practice in which teams develop software products in short cycles. This makes it easier to release software at any time. The primary goal of continuous delivery is to build, test, and release software at the right speed and frequency. Allowing frequent updates in production helps reduce the cost, time, and risk of deploying changes.

CI/CD is a set of processes that enable developers to quickly incorporate changes into software applications and deploy them to staging or production environments. This is a key component of Agile software development as it ensures that changes are tested and released in a timely manner.

The CI/CD process begins with a development team writing code and committing it to a source code repository. Once the code is executed, it starts an automated process. This often involves running tests to check your code for errors. If the tests pass, the code is integrated into the main branch of the repository. This integration process is CI-centric and is typically automated using CI tools such as Jenkins, CircleCI, and TravisCI etc.

The next step in the CI/CD process is continuous delivery. During this phase, the code is deployed to a staging or production environment, depending on your business needs. The deployment process is automated and often managed by a CD pipeline.

Multi-level has() query in laravel

Saroj Pradhan — Wed, 30 Nov 2022 09:03:20 +0000

When retrieving records from the database, sometimes we may require fetching those categories which has product, and this can be achieved by simply.
Click the link to read all.
https://blazecodes.pradhansaroj.com.np

Change color in each click using JavaScript

Saroj Pradhan — Tue, 29 Nov 2022 09:47:01 +0000

While developing webpages, if you have ever wondered how a user will be able to switch the color of an HTML element, then this task can be easily achievable with a little help of JavaScript.

In the below example, we will be changing the background color of the div element with a class named “container” whenever the button with id “click” is clicked. We will implement a JavaScript session in order to keep track of the user-selected color.

<div class="container" id="container">
    <button id="click" onclick="clickHere()">Click to Change color</button>
</div>

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.color{
    color:blue;
}
.container{
    height: 300px;
    width:400px;
    background-color: purple;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}
#click{
    padding: 1rem 1rem;
    border:none;
    border-radius: 10px;
    cursor:pointer;
    font-size:16px;
}

//array of color values
var color = ["red", "blue", "green", "orange", "yello", "cyan", "gray", "skyblue", "lightblue", "lightgreen"]

function clickHere(){
    // store the count of click in session 
    var count = sessionStorage.getItem("count")
    if(count !== null){
        // if the session/count exists then increment it with 1.
        sessionStorage.setItem("count",parseInt(count)+1)
    }else{
        // if the session/count is null i.e first click then start with 0
        // because our first array index is 0 i.e color[0] = "red"
        sessionStorage.setItem("count",0)
    }

    var newCount = sessionStorage.getItem("count")

  //get the session value to map the color index in color array
 document.getElementById("container").style.backgroundColor = color[parseInt(newCount)]

  // if the click count matches array length then reset the session value.
  // -1  in color.length because color.length gives 10 but final array index is 9.
    if (newCount == color.length-1){
        sessionStorage.removeItem("count")
    }
}

Open in Codepen